const featureItems = [
{
icon: "icon-[lucide--shield-check]",
eyebrow: "Citizen support",
title: "Citizen services",
description: "Report incidents, request certificates, and find safety information.",
href: "#citizen-services",
actionLabel: "Explore services",
badge: "Public",
color: "primary",
variant: "default",
hover: "lift",
},
{
icon: "icon-[lucide--map-pin]",
eyebrow: "Directory",
title: "Station directory",
description: "Locate offices, jurisdictions, contacts, and public service hours.",
href: "#station-directory",
actionLabel: "Find a station",
badge: "Directory",
color: "info",
variant: "soft",
hover: "border",
},
{
icon: "icon-[lucide--radio-tower]",
eyebrow: "Verified",
title: "Public updates",
description: "Publish official alerts, notices, advisories, and verified information.",
href: "#public-updates",
actionLabel: "View updates",
badge: "Live",
color: "success",
variant: "gradient",
hover: "glow",
},
];
const metricItems = [
{
label: "Public services",
value: "24",
description: "Citizen-facing services available online.",
icon: "icon-[lucide--hand-heart]",
trend: "+4",
trendLabel: "this release",
trendDirection: "up",
color: "primary",
},
{
label: "Police stations",
value: "126",
description: "Searchable station and jurisdiction entries.",
icon: "icon-[lucide--landmark]",
trend: "Updated",
trendLabel: "today",
color: "info",
},
{
label: "Availability",
value: "99.9",
suffix: "%",
description: "Target service availability.",
icon: "icon-[lucide--activity]",
trend: "Stable",
trendLabel: "30 days",
trendDirection: "positive",
color: "success",
},
];
const statsItems = [
{
label: "Composite components",
value: "18",
description: "Reusable public-page building blocks",
icon: "icon-[lucide--blocks]",
color: "primary",
},
{
label: "Rendering",
value: "SSR",
description: "Server-first WRNexusJS rendering",
icon: "icon-[lucide--server]",
color: "info",
},
{
label: "Responsive",
value: "Yes",
description: "Mobile, tablet, and desktop layouts",
icon: "icon-[lucide--monitor-smartphone]",
color: "success",
},
{
label: "Theme aware",
value: "Yes",
description: "Active theme and accent palettes",
icon: "icon-[lucide--palette]",
color: "warning",
},
];
const breadcrumbs = [
{ label: "Home", href: "/", icon: "icon-[lucide--house]" },
{ label: "Components", href: "/base" },
{ label: "Page header", current: true },
];
const heroActions = [
{
label: "Browse components",
href: "#components",
icon: "icon-[lucide--blocks]",
variant: "primary",
},
{
label: "View metrics",
href: "#metrics",
icon: "icon-[lucide--chart-no-axes-column-increasing]",
variant: "outline",
},
];
const menuItems = [
{
label: "Open dashboard",
description: "View the operational workspace",
value: "dashboard",
icon: "icon-[lucide--layout-dashboard]",
},
{
label: "Share record",
value: "share",
icon: "icon-[lucide--share-2]",
shortcut: "Ctrl S",
},
{ type: "divider" },
{
label: "Delete record",
value: "delete",
icon: "icon-[lucide--trash-2]",
danger: true,
},
];
const footerItems = [
{
type: "header",
label: "Product",
description: "Build consistent interfaces with WRNexusJS.",
items: [
{ label: "Components", href: "/base" },
{ label: "Themes", href: "/themes" },
{ label: "Examples", href: "/blocks" },
],
},
{
type: "header",
label: "Developers",
items: [
{ label: "Documentation", href: "/docs" },
{ label: "Installation", href: "/installation" },
{ label: "Framework guides", href: "/framework-guides" },
],
},
{
type: "header",
label: "Resources",
items: [
{ label: "Accessibility", href: "/accessibility" },
{ label: "Design tokens", href: "/colors" },
{ label: "Typography", href: "/fonts" },
],
},
{
type: "header",
label: "Company",
items: [
{ label: "WorkRoot", href: "https://workroot.in", external: true },
{ label: "WRNexusJS", href: "https://wrnexusjs.dev", external: true },
],
},
];
const visualPanel = `
Composable visual panel
Add a screenshot, product preview, media block, chart, form, or illustration.
`;
const shellPreview = `
Public page content
`;
const standard = (title, description, props = {}, slots = {}) => ({
eyebrow: "Recommended",
title,
description,
props,
slots,
});
const compact = (title, description, props = {}, slots = {}) => ({
eyebrow: "Compact",
title,
description,
props,
slots,
});
const advanced = (title, description, props = {}, slots = {}) => ({
eyebrow: "Advanced",
title,
description,
props,
slots,
});
export const componentProfiles = {
PublicPageShell: {
demos: [
standard(
"Complete public page shell",
"Use the shell around a complete marketing or public-service page.",
{ maxWidth: "xl", background: "default" },
{ default: shellPreview },
),
compact(
"Constrained documentation shell",
"Keep long-form documentation readable with a compact content width.",
{ maxWidth: "compact", headerOffset: "sm", background: "soft" },
{ default: shellPreview },
),
advanced(
"Full-bleed landing page",
"Allow full-width sections while keeping overflow and minimum-height behavior consistent.",
{ maxWidth: "full", fullWidth: true, minHeight: "screen", overflow: "clip" },
{ default: shellPreview },
),
],
options: {
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
headerOffset: ["none", "sm", "md", "lg"],
background: ["default", "soft", "raised", "transparent"],
overflow: ["visible", "hidden", "clip", "auto"],
minHeight: ["none", "screen", "full"],
},
},
AnnouncementBar: {
demos: [
standard(
"Soft product notice",
"Use a calm, dismissible notice inside a constrained content area.",
{
badge: "Public notice",
badgeIcon: "icon-[lucide--sparkles]",
message: "All composite components are now available",
description: "Review each component and its recommended use cases.",
icon: "icon-[lucide--megaphone]",
actionLabel: "View components",
actionHref: "#components",
actionIcon: "icon-[lucide--arrow-down]",
dismissible: true,
width: "default",
variant: "soft",
},
),
compact(
"Wide solid announcement",
"Use stronger contrast for important platform or service announcements.",
{
badge: "Release",
message: "WRNexusJS UI updates are ready",
description: "Explore the redesigned responsive components.",
icon: "icon-[lucide--rocket]",
actionLabel: "Read changes",
actionHref: "#release",
dismissible: true,
width: "wide",
compact: true,
variant: "solid",
},
),
advanced(
"Full-width critical alert",
"Use edge-to-edge width for time-sensitive information that applies to the complete page.",
{
badge: "Service alert",
message: "Scheduled maintenance tonight",
description: "Some services may be temporarily unavailable from 23:00 to 23:30.",
icon: "icon-[lucide--triangle-alert]",
actionLabel: "View status",
actionHref: "#status",
dismissible: true,
width: "full",
color: "warning",
variant: "solid",
},
),
],
playground: { width: "wide", dismissible: true, variant: "solid" },
options: {
width: ["default", "wide", "full"],
variant: ["default", "soft", "outline", "solid", "minimal"],
size: ["compact", "default", "spacious"],
color: ["primary", "secondary", "info", "success", "warning", "danger"],
role: ["status", "alert"],
live: ["off", "polite", "assertive"],
},
},
Breadcrumb: {
demos: [
standard("Minimal page trail", "Use a restrained breadcrumb above standard page content.", {
items: breadcrumbs,
size: "small",
variant: "minimal",
}),
compact(
"Soft navigation trail",
"Add a soft surface when the breadcrumb needs more separation from surrounding content.",
{ items: breadcrumbs, size: "medium", variant: "soft", showHome: true },
),
advanced(
"Large directory breadcrumb",
"Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.",
{
items: breadcrumbs,
size: "large",
variant: "outline",
showHome: true,
separator: "slash",
},
),
],
options: {
size: ["small", "medium", "large"],
separator: ["chevron", "slash", "dot", "arrow"],
variant: ["minimal", "soft", "outline", "contrast"],
},
},
PageHeader: {
demos: [
standard(
"Page header with actions",
"Introduce a service or documentation page with breadcrumbs and clear actions.",
{
eyebrow: "Component showcase",
title: "Page headers with clear hierarchy",
description:
"Use PageHeader for services, directories, legal pages, guides, dashboards, and public information.",
icon: "icon-[lucide--panel-top]",
showBreadcrumbs: true,
breadcrumbs,
primaryLabel: "Primary action",
primaryHref: "#primary",
primaryIcon: "icon-[lucide--arrow-down]",
secondaryLabel: "Secondary action",
secondaryHref: "#secondary",
secondaryIcon: "icon-[lucide--house]",
maxWidth: "full",
},
),
compact(
"Compact service header",
"Use reduced spacing when a page already sits inside an application shell.",
{
eyebrow: "Citizen service",
title: "Track a complaint",
description: "Check the latest status using your complaint reference.",
icon: "icon-[lucide--scan-search]",
compact: true,
primaryLabel: "Track status",
primaryHref: "#track",
variant: "soft",
},
),
advanced(
"Centered campaign header",
"Use a centered header for campaigns, guides, and high-level public information.",
{
eyebrow: "Safety guide",
title: "Prepare your family for emergencies",
description:
"Practical guidance for creating a plan, preparing supplies, and staying informed.",
centered: true,
align: "center",
variant: "minimal",
maxWidth: "wide",
},
),
],
playground: { showBreadcrumbs: true, breadcrumbs, maxWidth: "full" },
options: {
align: ["left", "center", "right"],
size: ["small", "default", "large"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
variant: ["default", "minimal", "soft", "raised", "tinted", "solid"],
color: ["primary", "secondary", "info", "success", "warning", "danger"],
},
},
Hero: {
demos: [
standard(
"Split hero with visual",
"Lead a landing page with clear content and a flexible visual slot.",
{
eyebrow: "Reusable public UI",
eyebrowIcon: "icon-[lucide--sparkles]",
title: "Build polished pages",
highlight: "with consistent hero layouts",
description:
"Create strong first impressions for public portals, product pages, and service overviews.",
layout: "split",
visualPosition: "right",
visualStyle: "card",
primaryLabel: "Explore components",
primaryHref: "#components",
primaryIcon: "icon-[lucide--arrow-right]",
secondaryLabel: "Read documentation",
secondaryHref: "#docs",
secondaryIcon: "icon-[lucide--book-open]",
maxWidth: "wide",
variant: "gradient",
},
{ visual: visualPanel },
),
compact(
"Centered campaign hero",
"Use a stacked, centered layout for announcements, campaigns, and simple conversion pages.",
{
eyebrow: "Public campaign",
title: "Safer communities start with trusted information",
description: "Find verified guidance, public notices, and citizen services in one place.",
align: "center",
layout: "stacked",
size: "default",
variant: "soft",
primaryLabel: "Browse services",
primaryHref: "#services",
},
),
advanced(
"Hero with badges and trust",
"Add product proof, audience badges, and supporting trust information.",
{
eyebrow: "Developer platform",
title: "Ship reliable interfaces faster",
highlight: "without duplicating design work",
description:
"Reusable components, server rendering, themes, accessibility, and responsive behavior.",
badges: ["SSR first", "Theme aware", "Accessible"],
trustItems: ["108 UI components", "Light and dark themes", "Mobile ready"],
layout: "split",
visualPosition: "left",
visualStyle: "soft",
variant: "raised",
},
{ visual: visualPanel },
),
],
playground: { layout: "split", visualPosition: "right", maxWidth: "wide" },
options: {
align: ["left", "center", "right"],
size: ["compact", "default", "lg", "xl"],
layout: ["split", "stacked", "content"],
visualPosition: ["left", "right"],
visualStyle: ["plain", "card", "soft"],
variant: ["default", "soft", "raised", "outline", "gradient", "solid", "minimal"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
HeroActions: {
demos: [
standard(
"Primary and secondary actions",
"Group the most important hero actions with consistent spacing and hierarchy.",
{ actions: heroActions, align: "left", orientation: "horizontal" },
),
compact(
"Centered campaign actions",
"Center actions beneath a stacked hero or CTA message.",
{ actions: heroActions, align: "center", orientation: "horizontal", size: "sm" },
),
advanced(
"Vertical mobile-first actions",
"Use a vertical group for narrow panels, onboarding, or three-action flows.",
{
actions: [
...heroActions,
{
label: "Contact support",
href: "#support",
icon: "icon-[lucide--life-buoy]",
variant: "ghost",
},
],
orientation: "vertical",
fullWidthMobile: true,
size: "lg",
},
),
],
playground: { actions: heroActions },
options: {
align: ["left", "center", "right"],
orientation: ["horizontal", "vertical"],
size: ["sm", "default", "lg"],
},
},
SplitHero: {
demos: [
standard(
"Balanced content and visual",
"Explain a product, department, or service with a balanced two-column introduction.",
{
eyebrow: "Balanced layout",
title: "Combine detailed content",
highlight: "with a strong visual panel",
description:
"Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling.",
primaryLabel: "View public services",
primaryHref: "#services",
primaryIcon: "icon-[lucide--arrow-right]",
secondaryLabel: "Contact department",
secondaryHref: "#contact",
secondaryIcon: "icon-[lucide--phone]",
visualPosition: "right",
ratio: "balanced",
maxWidth: "wide",
},
{ visual: visualPanel },
),
compact(
"Visual-first introduction",
"Reverse the layout when the screenshot, map, or media needs first visual priority.",
{
eyebrow: "Visual first",
title: "Show the interface before the explanation",
description: "Place the visual on the left and use a compact content column.",
visualPosition: "left",
reverse: true,
ratio: "visual",
variant: "soft",
},
{ visual: visualPanel },
),
advanced(
"Structured service overview",
"Use structured visual items for capabilities, facts, or proof points.",
{
eyebrow: "Department overview",
title: "One service, clearly explained",
description: "Pair narrative content with structured supporting information.",
visualTitle: "Service highlights",
visualDescription: "A consistent, responsive supporting panel.",
visualItems: [
{ label: "Online access", value: "24/7", icon: "icon-[lucide--globe-2]" },
{ label: "Response tracking", value: "Live", icon: "icon-[lucide--activity]" },
{ label: "Languages", value: "3", icon: "icon-[lucide--languages]" },
],
ratio: "content",
variant: "gradient",
},
),
],
options: {
visualPosition: ["left", "right"],
ratio: ["balanced", "content", "visual"],
align: ["left", "center", "right"],
variant: ["default", "soft", "raised", "gradient", "solid", "minimal"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
Section: {
demos: [
standard(
"Standard content section",
"Create predictable vertical rhythm around a page section.",
{ id: "standard-section", spacing: "lg", maxWidth: "xl" },
{ default: 'Standard section content
' },
),
compact(
"Compact dashboard section",
"Reduce spacing for dense application screens and grouped dashboard content.",
{ id: "compact-section", spacing: "sm", maxWidth: "wide", variant: "soft" },
{ default: 'Compact dashboard content
' },
),
advanced(
"Full-width surface section",
"Use a full-width background while retaining a structured content area.",
{
id: "full-section",
fullWidth: true,
maxWidth: "full",
borderTop: true,
borderBottom: true,
variant: "raised",
},
{ default: 'Full-width public page section
' },
),
],
options: {
spacing: ["none", "sm", "md", "lg", "xl"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
variant: ["default", "soft", "raised", "transparent"],
},
},
SectionHeader: {
demos: [
standard(
"Left-aligned section header",
"Introduce features, services, content groups, or dashboard areas.",
{
eyebrow: "Public services",
title: "Everything citizens need",
description:
"Discover online services, directories, guidance, and verified public information.",
align: "left",
maxWidth: "3xl",
},
),
compact(
"Centered section header",
"Use centered hierarchy above feature grids, testimonials, and campaign content.",
{
eyebrow: "Capabilities",
title: "A consistent component system",
description: "Compose complete pages without rebuilding spacing and typography.",
align: "center",
size: "compact",
},
),
advanced(
"Large editorial header",
"Use a larger heading for major landing-page sections and product storytelling.",
{
eyebrow: "Platform",
title: "Designed for complex public and enterprise interfaces",
description: "Theme-aware, responsive, accessible, and server-rendered.",
align: "left",
size: "large",
maxWidth: "full",
},
),
],
options: {
align: ["left", "center", "right"],
size: ["compact", "default", "large"],
maxWidth: ["compact", "lg", "xl", "3xl", "full"],
},
},
MarketingSectionHeader: {
demos: [
standard(
"Split header with action",
"Pair marketing copy with a clear secondary navigation action.",
{
eyebrow: "Platform capabilities",
title: "Build complete public experiences",
description: "Use reusable sections, cards, metrics, heroes, and CTAs.",
align: "split",
actionLabel: "Explore components",
actionHref: "#components",
actionIcon: "icon-[lucide--arrow-right]",
},
),
compact(
"Centered marketing header",
"Use a centered configuration above campaigns, proof, and feature collections.",
{
eyebrow: "Why WRNexusJS",
title: "One coherent design system",
description: "Consistent presentation across public pages and product applications.",
align: "center",
size: "compact",
},
),
advanced(
"External resource header",
"Link to supporting documentation or an external resource.",
{
eyebrow: "Developer resources",
title: "Learn the framework through working examples",
description:
"Every component page includes live demos, playground controls, events, and API details.",
actionLabel: "Open documentation",
actionHref: "https://wrnexusjs.dev",
actionExternal: true,
align: "split",
size: "large",
},
),
],
options: {
align: ["left", "center", "right", "split"],
size: ["compact", "default", "large"],
},
},
TextLink: {
demos: [
standard(
"Inline directional link",
"Use a lightweight link at the end of a card, section, or short content block.",
{ label: "Learn more", href: "#learn", showArrow: true, variant: "default" },
),
compact(
"Underlined content link",
"Use an underline when the link appears inside long-form text.",
{
label: "Read the complete guide",
href: "#guide",
underline: true,
showArrow: false,
size: "sm",
},
),
advanced(
"External developer link",
"Clearly communicate that a resource opens outside the current application.",
{
label: "Open WRNexusJS documentation",
href: "https://wrnexusjs.dev",
external: true,
target: "_blank",
icon: "icon-[lucide--book-open]",
iconPosition: "start",
showArrow: false,
variant: "soft",
},
),
],
options: {
iconPosition: ["start", "end"],
size: ["sm", "default", "lg"],
variant: ["default", "soft", "ghost", "minimal"],
},
},
FeatureGrid: {
demos: [
standard(
"Three-column service grid",
"Arrange services or capabilities as equal-height responsive cards.",
{
items: featureItems,
columns: 3,
tabletColumns: 2,
mobileColumns: 1,
gap: "lg",
equalHeight: true,
maxWidth: "full",
},
),
compact(
"Compact four-column grid",
"Use smaller gaps and four columns for short benefit or capability cards.",
{
items: featureItems.concat([
{
icon: "icon-[lucide--file-check-2]",
title: "Certificates",
description: "Request and track certificates online.",
href: "#certificates",
color: "warning",
},
]),
columns: 4,
tabletColumns: 2,
mobileColumns: 1,
gap: "sm",
variant: "soft",
},
),
advanced(
"Auto-fit feature collection",
"Let cards wrap automatically according to a minimum useful width.",
{
items: featureItems,
minItemWidth: "18rem",
columns: 3,
gap: "xl",
variant: "panel",
maxWidth: "wide",
},
),
],
playground: {
items: featureItems,
columns: 3,
tabletColumns: 2,
mobileColumns: 1,
maxWidth: "full",
},
options: {
columns: ["1", "2", "3", "4", "5", "6"],
tabletColumns: ["1", "2", "3", "4"],
mobileColumns: ["1", "2"],
gap: ["none", "sm", "md", "lg", "xl"],
align: ["start", "center", "end", "stretch"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
variant: ["default", "panel", "soft"],
},
},
FeatureCard: {
demos: [
standard(
"Linked service card",
"Present one service with an icon, hierarchy, badge, and clear action.",
{ ...featureItems[0], iconStyle: "soft", stretchedLink: true },
),
compact(
"Image-led feature card",
"Use a visual preview for products, campaigns, dashboards, or service explanations.",
{
title: "Unified citizen portal",
description: "Access trusted services from one responsive interface.",
image:
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='610' cy='130' r='120' fill='%237c3aed' opacity='.55'/%3E%3Crect x='90' y='90' width='430' height='270' rx='28' fill='%23ffffff' opacity='.12'/%3E%3C/svg%3E",
imageAlt: "Abstract dashboard preview",
imagePosition: "top",
imageAspect: "wide",
href: "#portal",
actionLabel: "Open portal",
badge: "Featured",
color: "info",
variant: "raised",
},
),
advanced(
"Solid callout card",
"Use stronger contrast for a featured capability or high-priority service.",
{
icon: "icon-[lucide--siren]",
eyebrow: "Emergency",
title: "Get urgent help",
description: "Find verified emergency contacts and immediate safety guidance.",
href: "#emergency",
actionLabel: "View emergency help",
badge: "Important",
color: "danger",
variant: "solid",
hover: "glow",
},
),
],
options: {
iconStyle: ["plain", "soft", "solid", "outline"],
iconSize: ["sm", "default", "lg"],
imagePosition: ["top", "left", "right"],
imageAspect: ["square", "wide", "video", "portrait"],
variant: ["default", "raised", "soft", "outline", "ghost", "minimal", "solid", "gradient"],
hover: ["none", "lift", "shadow", "border", "glow"],
align: ["left", "center", "right"],
},
},
FeatureIconCard: {
demos: [
standard(
"Icon-led capability card",
"Use a compact card for one feature, benefit, or linked capability.",
{
icon: "icon-[lucide--shield-check]",
title: "Secure by design",
description: "Build with consistent validation, accessibility, and theme support.",
href: "#security",
actionLabel: "Review security",
badge: "Core",
},
),
compact(
"Centered benefit card",
"Center the content for short benefit grids and campaign proof points.",
{
icon: "icon-[lucide--gauge]",
title: "Fast rendering",
description: "Server-first output with focused client behavior.",
align: "center",
size: "compact",
iconVariant: "solid",
color: "info",
},
),
advanced(
"Highlighted linked card",
"Use a stronger raised treatment for a featured capability.",
{
icon: "icon-[lucide--workflow]",
title: "Composable workflows",
description: "Connect forms, services, data, and actions without duplicating UI.",
href: "#workflows",
actionLabel: "Explore workflows",
variant: "raised",
hover: "lift",
color: "success",
},
),
],
options: {
iconSize: ["sm", "md", "lg"],
iconVariant: ["plain", "soft", "solid", "outline"],
size: ["compact", "default", "large"],
variant: ["default", "soft", "raised", "outline", "minimal"],
align: ["left", "center", "right"],
hover: ["none", "lift", "border", "glow"],
},
},
MetricGrid: {
demos: [
standard(
"Three-column KPI grid",
"Display operational values in a full-width, responsive grid.",
{
items: metricItems,
columns: 3,
tabletColumns: 2,
mobileColumns: 1,
gap: "lg",
maxWidth: "full",
equalHeight: true,
},
),
compact(
"Unified metrics bar",
"Use dividers to present compact metrics as one cohesive surface.",
{
items: metricItems,
columns: 3,
tabletColumns: 2,
mobileColumns: 1,
gap: "none",
dividers: true,
size: "sm",
maxWidth: "wide",
},
),
advanced(
"Auto-fit monitoring grid",
"Allow cards to wrap automatically when the number of metrics changes.",
{
items: metricItems.concat([
{
label: "Response time",
value: "1.8",
suffix: "s",
description: "Median API response",
icon: "icon-[lucide--timer]",
color: "warning",
progress: 72,
progressLabel: "Target",
},
]),
minItemWidth: "17rem",
columns: 4,
variant: "soft",
maxWidth: "full",
},
),
],
playground: {
items: metricItems,
columns: 3,
tabletColumns: 2,
mobileColumns: 1,
maxWidth: "full",
},
options: {
columns: ["1", "2", "3", "4", "5", "6"],
tabletColumns: ["1", "2", "3", "4"],
mobileColumns: ["1", "2"],
gap: ["none", "sm", "md", "lg", "xl"],
variant: ["default", "panel", "soft"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
MetricCard: {
demos: [
standard(
"Operational KPI",
"Display one metric with a clear label, value, supporting description, and trend.",
{ ...metricItems[2], actionLabel: "Open status", href: "#status" },
),
compact("Progress metric", "Add progress when a value is measured against a clear target.", {
label: "Profile completion",
value: "72",
suffix: "%",
description: "Complete the remaining account and security steps.",
icon: "icon-[lucide--circle-user-round]",
progress: 72,
progressLabel: "Account setup",
color: "info",
variant: "soft",
}),
advanced(
"Selectable dashboard metric",
"Emit select and action events from interactive cards used in dashboards.",
{
label: "Open complaints",
value: "38",
description: "Cases waiting for review or assignment.",
icon: "icon-[lucide--inbox]",
badge: "Needs review",
selectable: true,
actionLabel: "Review queue",
href: "#queue",
color: "warning",
variant: "raised",
hover: "glow",
},
),
],
options: {
iconStyle: ["plain", "soft", "solid", "outline"],
trendDirection: ["neutral", "up", "down", "positive", "negative"],
variant: ["default", "raised", "soft", "outline", "minimal", "solid", "gradient"],
hover: ["none", "lift", "border", "glow"],
align: ["left", "center", "right"],
},
},
StatsBar: {
demos: [
standard(
"Public proof strip",
"Present key facts and trust signals in one compact responsive row.",
{
items: statsItems,
columns: 4,
compact: true,
dividers: true,
icons: true,
variant: "raised",
maxWidth: "xl",
},
),
compact(
"Three-stat compact bar",
"Use fewer facts with tighter spacing below a hero or page header.",
{
items: statsItems.slice(0, 3),
columns: 3,
compact: true,
dividers: true,
icons: false,
variant: "soft",
maxWidth: "wide",
},
),
advanced(
"Full-width solid statistics",
"Use a high-contrast statistics bar as a major landing-page transition.",
{
items: statsItems,
columns: 4,
compact: false,
dividers: false,
icons: true,
variant: "solid",
maxWidth: "full",
color: "primary",
},
),
],
playground: { items: statsItems, columns: 4, maxWidth: "xl" },
options: {
columns: ["1", "2", "3", "4", "5", "6"],
variant: ["default", "raised", "soft", "outline", "minimal", "solid"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
CTASection: {
demos: [
standard(
"Split conversion CTA",
"Close a major page section with a clear action and supporting visual content.",
{
eyebrow: "Ready to continue",
title: "Build public pages with reusable components",
description:
"Keep application pages focused on content and business data while the shared UI package owns presentation.",
icon: "icon-[lucide--rocket]",
align: "split",
primaryLabel: "Use these components",
primaryHref: "#components",
primaryIcon: "icon-[lucide--blocks]",
secondaryLabel: "Back to home",
secondaryHref: "/",
secondaryIcon: "icon-[lucide--house]",
variant: "gradient",
maxWidth: "full",
},
{ visual: visualPanel },
),
compact(
"Centered signup CTA",
"Use a focused centered CTA after pricing, guides, or product explanations.",
{
eyebrow: "Get started",
title: "Create your first WRNexusJS page",
description:
"Install the framework and compose your application with the component system.",
align: "center",
primaryLabel: "Read installation",
primaryHref: "/installation",
secondaryLabel: "Browse examples",
secondaryHref: "/blocks",
variant: "solid",
maxWidth: "xl",
},
),
advanced(
"Full-bleed service CTA",
"Use an edge-to-edge surface for high-priority registration, service, or contact actions.",
{
eyebrow: "Citizen account",
title: "Access services and track requests securely",
description: "Create an account to submit, track, and manage citizen-service requests.",
align: "left",
primaryLabel: "Create account",
primaryHref: "#register",
secondaryLabel: "Sign in",
secondaryHref: "#sign-in",
visualIcon: "icon-[lucide--shield-check]",
visualTitle: "Secure public access",
visualDescription: "One account for requests, certificates, updates, and notifications.",
fullBleed: true,
variant: "solid",
maxWidth: "full",
},
),
],
options: {
align: ["left", "center", "right", "split"],
size: ["compact", "default", "large"],
visualPosition: ["left", "right"],
variant: ["default", "soft", "outline", "solid", "gradient", "minimal"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
BackToTop: {
demos: [
standard(
"Floating round control",
"Return visitors to the top of a long page after the scroll threshold is reached.",
{ alwaysVisible: true, position: "right", shape: "round", variant: "solid" },
),
compact(
"Pill control with label",
"Show a visible text label when the action needs extra clarity.",
{
alwaysVisible: true,
showLabel: true,
label: "Back to top",
position: "right",
shape: "pill",
variant: "soft",
},
),
advanced(
"Progress-aware control",
"Display page scroll progress around the floating control on long articles or directories.",
{
alwaysVisible: true,
showProgress: true,
position: "left",
offset: "lg",
shape: "round",
variant: "outline",
},
),
],
playground: { alwaysVisible: true },
options: {
position: ["left", "center", "right"],
offset: ["sm", "md", "lg"],
behavior: ["auto", "smooth"],
variant: ["solid", "soft", "outline", "ghost", "minimal"],
shape: ["round", "rounded", "pill"],
size: ["sm", "default", "lg"],
},
},
Footer: {
demos: [
standard(
"Four-column public footer",
"Organize product, developer, resource, and company links into responsive columns.",
{
items: footerItems,
columns: 4,
maxWidth: "wide",
copyright: "© 2026 WRNexusJS. All rights reserved.",
},
),
compact(
"Compact application footer",
"Use fewer columns and reduced spacing inside product applications.",
{
items: footerItems.slice(0, 3),
columns: 3,
size: "compact",
maxWidth: "compact",
copyright: "WRNexusJS component showcase",
},
),
advanced(
"Full-width footer with slots",
"Compose pre-footer, post-footer, and legal content around structured navigation.",
{
items: footerItems,
columns: 4,
size: "spacious",
maxWidth: "full",
copyright: "Built with WRNexusJS",
},
{
"pre-footer":
'',
"copyright-right":
'',
},
),
],
playground: { items: footerItems, columns: 4, maxWidth: "wide" },
options: {
columns: ["1", "2", "3", "4", "5"],
size: ["compact", "default", "spacious"],
maxWidth: ["compact", "wide", "xl", "full"],
},
},
ContextMenu: {
demos: [
standard(
"Right-click record actions",
"Expose actions that apply to the selected record or canvas location.",
{
items: menuItems,
title: "Record actions",
description: "Right-click the target surface",
trigger: "contextmenu",
placement: "pointer",
},
{
trigger: 'Right-click for contextual actions
',
},
),
compact(
"Click-triggered compact menu",
"Use a button-triggered context menu when discoverability matters.",
{
items: menuItems,
title: "Quick actions",
trigger: "click",
size: "sm",
minWidth: "12rem",
},
{ trigger: 'Open quick actions ' },
),
advanced(
"Pointer and keyboard menu",
"Support right-click, click, and keyboard activation without forcing the menu open.",
{
items: menuItems,
title: "Accessible actions",
open: false,
defaultOpen: false,
trigger: "both",
variant: "soft",
placement: "bottom-start",
},
{
trigger:
'Click, press Enter, or right-click ',
},
),
],
playground: { items: menuItems, open: false, defaultOpen: false, trigger: "click" },
options: {
trigger: ["contextmenu", "click", "both", "manual"],
placement: ["pointer", "top-start", "top-end", "bottom-start", "bottom-end"],
align: ["start", "center", "end"],
size: ["sm", "default", "lg"],
variant: ["default", "raised", "soft", "outline"],
},
},
Dropdown: {
demos: [
standard("Action dropdown", "Group related actions behind one compact trigger.", {
label: "Open actions",
icon: "icon-[lucide--menu]",
items: menuItems,
placement: "bottom-start",
width: "lg",
}),
compact(
"Compact overflow menu",
"Use an icon-led compact menu in tables, cards, and toolbars.",
{
label: "More actions",
icon: "icon-[lucide--ellipsis]",
items: menuItems,
size: "sm",
width: "sm",
showChevron: false,
variant: "soft",
},
),
advanced(
"Detailed action menu",
"Open the menu from its trigger to preview placement, descriptions, shortcuts, danger states, and event output.",
{
label: "Review detailed menu",
items: menuItems,
open: false,
defaultOpen: false,
placement: "bottom-end",
width: "xl",
variant: "raised",
},
),
],
playground: {
items: menuItems,
open: false,
defaultOpen: false,
label: "Open playground menu",
},
options: {
placement: ["top-start", "top-end", "bottom-start", "bottom-end"],
width: ["sm", "md", "lg", "xl", "full"],
size: ["sm", "default", "lg"],
variant: ["default", "raised", "soft", "outline"],
},
},
Drawer: {
demos: [
standard(
"Right-side detail drawer",
"Keep supporting record details or forms available without leaving the page.",
{
triggerLabel: "Open drawer",
triggerIcon: "icon-[lucide--panel-right-open]",
title: "Citizen service details",
description: "Review supporting information without leaving the current page.",
icon: "icon-[lucide--panel-right]",
placement: "right",
size: "md",
},
{
default:
'Place forms, filters, navigation, or record details here.
Save changes ',
},
),
compact(
"Bottom mobile drawer",
"Use a bottom sheet for compact mobile workflows and contextual actions.",
{
triggerLabel: "Open mobile sheet",
title: "Choose an action",
placement: "bottom",
size: "sm",
variant: "soft",
},
{
default:
'Mobile-friendly supporting actions.
Long scrollable content
Filters, navigation, details, and forms can be composed here.
This request will be submitted for review.
Request title Description
',
},
),
],
playground: {
open: false,
defaultOpen: false,
triggerLabel: "Open playground modal",
title: "Modal playground",
},
options: {
size: ["sm", "md", "lg", "xl", "full"],
placement: ["center", "top"],
variant: ["default", "soft", "outline", "solid"],
},
},
Popover: {
demos: [
standard(
"Supporting information",
"Attach contextual information and actions to a nearby trigger.",
{
triggerLabel: "View details",
triggerIcon: "icon-[lucide--info]",
title: "Verified public information",
description: "This panel can contain text, actions, forms, or custom content.",
icon: "icon-[lucide--badge-check]",
actionLabel: "Open guide",
actionHref: "#guide",
width: "lg",
},
{
default:
"Popover content remains attached to its trigger and becomes mobile-friendly on small screens.
",
},
),
compact(
"Compact action popover",
"Use a small popover for quick actions and concise explanations.",
{
triggerLabel: "Quick actions",
triggerIcon: "icon-[lucide--zap]",
title: "Quick actions",
placement: "top",
width: "sm",
size: "sm",
variant: "soft",
},
{
default:
'Copy Share
',
},
),
advanced(
"Rich status popover",
"Open a wide panel with close control, arrow, custom content, and footer action.",
{
open: false,
defaultOpen: false,
triggerLabel: "Open rich panel",
title: "Service status",
description: "Current operational information.",
placement: "bottom-end",
width: "xl",
showClose: true,
actionLabel: "Open status page",
actionHref: "#status",
variant: "raised",
},
{
default:
'All systems operational Last checked moments ago
',
},
),
],
playground: {
open: false,
defaultOpen: false,
triggerLabel: "Open playground popover",
title: "Popover playground",
},
options: {
placement: [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end",
"left",
"right",
],
width: ["sm", "md", "lg", "xl"],
size: ["sm", "default", "lg"],
variant: ["default", "raised", "soft", "outline"],
},
},
Tooltip: {
demos: [
standard(
"Hover and focus tooltip",
"Explain an unfamiliar control without interrupting the workflow.",
{
id: "help-tooltip",
title: "Helpful information",
content: "Tooltips explain controls without interrupting the user.",
placement: "top",
},
{ trigger: 'Hover or focus ' },
),
compact(
"Click tooltip",
"Use click activation for touch-first or interactive help.",
{
id: "click-tooltip",
content: "Click again or press Escape to close.",
trigger: "click",
placement: "bottom",
size: "sm",
variant: "soft",
},
{ trigger: 'Click for help ' },
),
advanced(
"Interactive rich tooltip",
"Allow pointer interaction when the tooltip contains supporting links or controls.",
{
id: "interactive-tooltip",
title: "Keyboard shortcut",
description: "Open global search from anywhere.",
content: "Press Ctrl or Command plus K.",
trigger: "both",
placement: "right",
interactive: true,
maxWidth: "22rem",
variant: "dark",
},
{ trigger: 'Show shortcut ' },
),
],
playground: {
open: false,
defaultOpen: false,
trigger: "hover",
content: "Hover or focus the trigger to inspect the tooltip.",
},
options: {
trigger: ["hover", "focus", "click", "both"],
placement: [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end",
"left",
"right",
],
size: ["sm", "default", "lg"],
variant: ["dark", "light", "soft", "solid"],
},
},
Container: {
demos: [
standard(
"Standard content container",
"Keep page content aligned to a predictable readable width.",
{ maxWidth: "xl", size: "default" },
{ default: 'Centered container content
' },
),
compact(
"Compact reading container",
"Use a smaller maximum width for forms, legal copy, and focused content.",
{ maxWidth: "compact", size: "compact" },
{ default: 'Compact readable content
' },
),
advanced(
"Full-width layout container",
"Allow dashboards and data-heavy pages to use the available width.",
{ maxWidth: "full", size: "spacious" },
{ default: 'Full-width dashboard content
' },
),
],
options: {
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
size: ["compact", "default", "spacious"],
},
},
Grid: {
demos: [
standard(
"Responsive three-column grid",
"Arrange equal-width children with consistent gaps.",
{ columns: 3, gap: "md", maxWidth: "xl" },
{
default:
'One Two Three
',
},
),
compact(
"Dense four-column grid",
"Use smaller gaps for dashboards and compact overview pages.",
{ columns: 4, gap: "sm", maxWidth: "wide", size: "compact" },
{
default:
'One Two Three Four
',
},
),
advanced(
"Full-width two-column grid",
"Use larger gaps for editorial or marketing split layouts.",
{ columns: 2, gap: "xl", maxWidth: "full", size: "spacious" },
{
default:
'Primary Secondary
',
},
),
],
options: {
columns: ["1", "2", "3", "4", "5", "6"],
gap: ["none", "sm", "md", "lg", "xl"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
Columns: {
demos: [
standard(
"Two-column content layout",
"Split supporting content into balanced responsive columns.",
{ columns: 2, gap: "lg", maxWidth: "xl" },
{
default:
'Content column Supporting column
',
},
),
compact(
"Three compact columns",
"Use three columns for short summaries and dashboard groups.",
{ columns: 3, gap: "sm", size: "compact", maxWidth: "wide" },
{
default:
'One Two Three
',
},
),
advanced(
"Full-width four columns",
"Use the full available width for structured application content.",
{ columns: 4, gap: "md", maxWidth: "full" },
{
default:
'A B C D
',
},
),
],
options: {
columns: ["1", "2", "3", "4", "5", "6"],
gap: ["none", "sm", "md", "lg", "xl"],
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
},
},
Card: {
demos: [
standard(
"Structured content card",
"Group a title, description, content, and supporting actions.",
{
title: "Citizen service",
description: "Access a trusted online service.",
variant: "default",
},
{
default:
'Supporting content belongs inside the default slot.
',
},
),
compact(
"Compact dashboard card",
"Use reduced spacing for metrics, filters, and operational information.",
{
title: "Open requests",
description: "Requests waiting for assignment.",
size: "compact",
variant: "soft",
},
{ default: '38 ' },
),
advanced(
"Raised interactive card",
"Use a stronger visual treatment for featured content.",
{
title: "Featured guide",
description: "A complete guide to public safety and emergency readiness.",
size: "spacious",
variant: "raised",
},
{ default: 'Read guide ' },
),
],
options: {
size: ["compact", "default", "spacious"],
variant: ["default", "soft", "raised", "outline", "minimal"],
},
},
Link: {
demos: [
standard("Standard navigation link", "Use for routes within the current application.", {
label: "Open components",
href: "/base",
}),
compact(
"External resource link",
"Communicate external navigation and use safe target attributes.",
{
label: "WRNexusJS documentation",
href: "https://wrnexusjs.dev",
external: true,
target: "_blank",
},
),
advanced(
"Large emphasized link",
"Use a larger link in empty states, promotional cards, and resource lists.",
{ label: "Explore framework guides", href: "/framework-guides", size: "lg", color: "info" },
),
],
options: { size: ["sm", "default", "lg"], target: ["_self", "_blank", "_parent", "_top"] },
},
Image: {
demos: [
standard(
"Responsive content image",
"Render a responsive image with meaningful alternative text.",
{
src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E",
alt: "Abstract violet circle on a dark surface",
width: "800",
height: "450",
},
),
compact(
"Rounded thumbnail",
"Use a rounded image in cards, directories, and compact summaries.",
{
src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E",
alt: "Abstract blue thumbnail",
width: "400",
height: "400",
rounded: true,
size: "sm",
},
),
advanced(
"Eager hero image",
"Use explicit dimensions and eager loading for an above-the-fold visual.",
{
src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E",
alt: "Abstract green hero visual",
width: "1200",
height: "600",
loading: "eager",
rounded: true,
size: "lg",
},
),
],
options: { loading: ["lazy", "eager"], size: ["sm", "default", "lg"] },
},
SearchBox: {
demos: [
standard(
"Site search",
"Give visitors a clear way to search pages, services, or resources.",
{
label: "Search documentation",
name: "site-search",
placeholder: "Search components and guides",
type: "search",
},
),
compact(
"Compact directory search",
"Use a compact field above tables, lists, and directories.",
{
label: "Search stations",
name: "station-search",
placeholder: "Name, district, or jurisdiction",
size: "sm",
},
),
advanced(
"Required service lookup",
"Use validation and required semantics in focused lookup flows.",
{
label: "Complaint reference",
name: "complaint-reference",
placeholder: "Enter reference number",
required: true,
size: "lg",
color: "info",
},
),
],
options: { size: ["sm", "default", "lg"], type: ["search", "text"] },
},
Map: {
demos: [
standard(
"Station directory map",
"Present locations with supporting names, addresses, and actions.",
{
title: "Nearby police stations",
description: "Select a station to view contact details and jurisdiction information.",
items: [
{
title: "Central station",
description: "Main Road",
latitude: 18.5204,
longitude: 73.8567,
},
{
title: "North station",
description: "University Road",
latitude: 18.559,
longitude: 73.807,
},
],
},
),
compact(
"Compact location preview",
"Use a smaller map preview inside cards, drawers, and record details.",
{
title: "Service location",
description: "Public service office",
items: [{ title: "Public office", description: "City centre" }],
size: "sm",
variant: "soft",
},
),
advanced(
"Operations map",
"Use a larger map surface for multiple markers and operational context.",
{
title: "Jurisdiction overview",
description: "Stations, service areas, and public facilities.",
items: [{ title: "Station A" }, { title: "Station B" }, { title: "Control room" }],
size: "lg",
variant: "raised",
color: "info",
},
),
],
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
},
List: {
demos: [
standard(
"Linked resource list",
"Present related links with supporting descriptions and icons.",
{
title: "Citizen resources",
description: "Commonly requested public information.",
items: [
{ label: "Report crime", href: "#report", icon: "icon-[lucide--shield-alert]" },
{ label: "Track complaint", href: "#track", icon: "icon-[lucide--scan-search]" },
{ label: "Certificates", href: "#certificates", icon: "icon-[lucide--file-check-2]" },
],
},
),
compact(
"Compact status list",
"Use a dense list in sidebars, dashboards, and record panels.",
{
title: "Current status",
items: [
{ label: "Application received", status: "Complete" },
{ label: "Verification", status: "In progress" },
{ label: "Decision", status: "Pending" },
],
size: "sm",
variant: "soft",
},
),
advanced(
"Rich action list",
"Combine descriptions, icons, statuses, and actions in a structured collection.",
{
title: "Service requests",
description: "Recent requests and their current status.",
items: [
{
label: "Address verification",
description: "Submitted yesterday",
status: "Review",
href: "#request-1",
},
{
label: "Character certificate",
description: "Submitted 3 days ago",
status: "Approved",
href: "#request-2",
},
],
size: "lg",
variant: "raised",
},
),
],
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
},
Marquee: {
demos: [
standard(
"Partner and capability strip",
"Continuously present short labels, partners, channels, or capabilities.",
{
title: "Supported capabilities",
items: [
{ label: "SSR" },
{ label: "CSR" },
{ label: "Themes" },
{ label: "Accessibility" },
{ label: "Responsive UI" },
],
variant: "default",
},
),
compact("Compact announcement ticker", "Use a dense ticker for short operational updates.", {
items: [
{ label: "All services operational" },
{ label: "New components published" },
{ label: "Documentation updated" },
],
size: "sm",
variant: "soft",
}),
advanced(
"Large visual marquee",
"Use stronger spacing and richer items on marketing pages.",
{
title: "Built for complete digital platforms",
items: [
{ label: "Public portals", icon: "icon-[lucide--landmark]" },
{ label: "Enterprise systems", icon: "icon-[lucide--building-2]" },
{ label: "Developer tools", icon: "icon-[lucide--code-2]" },
],
size: "lg",
variant: "raised",
color: "info",
},
),
],
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
},
Tabs: {
demos: [
standard(
"Horizontal content tabs",
"Switch between related content panels without navigating away.",
{
label: "Service information",
items: [
{ label: "Overview", value: "overview", content: "Overview content" },
{ label: "Requirements", value: "requirements", content: "Requirements content" },
{ label: "Process", value: "process", content: "Process content" },
],
active: "overview",
orientation: "horizontal",
},
),
compact(
"Compact application tabs",
"Use smaller tabs in dashboards, panels, and dense product interfaces.",
{
label: "Record views",
items: [
{ label: "Details", value: "details" },
{ label: "History", value: "history" },
{ label: "Files", value: "files" },
],
active: "details",
size: "sm",
},
),
advanced(
"Vertical settings tabs",
"Use vertical tabs for settings, configuration, and long-form navigation.",
{
label: "Settings",
items: [
{ label: "Profile", value: "profile", icon: "icon-[lucide--user]" },
{ label: "Security", value: "security", icon: "icon-[lucide--shield]" },
{ label: "Notifications", value: "notifications", icon: "icon-[lucide--bell]" },
],
active: "security",
orientation: "vertical",
size: "lg",
},
),
],
options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
},
Timeline: {
demos: [
standard(
"Application timeline",
"Explain the sequence and current status of a request or process.",
{
title: "Request progress",
description: "Latest updates for this service request.",
items: [
{
title: "Request submitted",
description: "Received successfully",
time: "09:30",
status: "complete",
},
{
title: "Verification",
description: "Documents are being reviewed",
time: "10:15",
current: true,
},
{ title: "Decision", description: "Pending verification", time: "—" },
],
},
),
compact(
"Compact activity history",
"Use a dense history inside drawers, side panels, and record views.",
{
title: "Recent activity",
items: [
{ title: "Status changed", time: "Today" },
{ title: "Comment added", time: "Yesterday" },
{ title: "Document uploaded", time: "3 days ago" },
],
size: "sm",
variant: "soft",
},
),
advanced(
"Rich milestone timeline",
"Use icons, descriptions, times, and states for longer workflows.",
{
title: "Implementation milestones",
description: "Planned delivery sequence.",
items: [
{
title: "Foundation",
description: "Tokens, themes, and primitives",
icon: "icon-[lucide--layers-3]",
status: "complete",
},
{
title: "Components",
description: "Reusable UI and documentation",
icon: "icon-[lucide--blocks]",
current: true,
},
{
title: "Applications",
description: "Compose production interfaces",
icon: "icon-[lucide--rocket]",
},
],
size: "lg",
variant: "raised",
},
),
],
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
},
Typography: {
demos: [
standard(
"Readable content typography",
"Apply consistent typography to headings, paragraphs, lists, and inline content.",
{ maxWidth: "xl", size: "default" },
{
default:
'Readable page content Typography creates consistent hierarchy and comfortable reading rhythm.
Clear headings Readable paragraphs Consistent lists Compact reference Focused content with reduced spacing.
Long-form public information Structured editorial content can use a wider two-column layout on large screens.
Responsive behavior returns content to one column on smaller screens.