288 lines
86 KiB
Plaintext
288 lines
86 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page BaseShowcase {
|
|
layout = "showcase"
|
|
seo {
|
|
title = "Base components"
|
|
description = "27 base components from @wrnexus/ui."
|
|
}
|
|
view {
|
|
<header class="showcase-hero showcase-hero--category">
|
|
<span class="showcase-eyebrow">Component category</span>
|
|
<h1 class="showcase-title">Base</h1>
|
|
<p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
|
<div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>81 live configurations</span></div>
|
|
</header>
|
|
<div class="catalog-grid">
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Accordion" size="default" items="[{"id":"accordion-0-1","key":"accordion-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"accordion-0-2","key":"accordion-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" multiple="false" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
|
|
<div class="catalog-card-footer"><span>5 props · 1 slots</span><a href="/components/accordion">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Alert" size="default" title="Alert example" description="A polished default alert for a modern application." items="[{"id":"alert-0-1","key":"alert-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"alert-0-2","key":"alert-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/alert">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Avatar" size="default" title="Avatar example" description="A polished default avatar for a modern application." items="[{"id":"avatar-0-1","key":"avatar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-0-2","key":"avatar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/avatar">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="AvatarGroup" size="default" title="Avatar Group example" description="A polished default avatar group for a modern application." items="[{"id":"avatar-group-0-1","key":"avatar-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/avatar-group">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Badge" size="default" title="Badge example" description="A polished default badge for a modern application." items="[{"id":"badge-0-1","key":"badge-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#badge-demo","actionHref":"#badge-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"badge-0-2","key":"badge-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#badge-demo","actionHref":"#badge-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Blockquote" size="default" title="Blockquote example" description="A polished default blockquote for a modern application." items="[{"id":"blockquote-0-1","key":"blockquote-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#blockquote-demo","actionHref":"#blockquote-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"blockquote-0-2","key":"blockquote-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#blockquote-demo","actionHref":"#blockquote-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Button" label="Save & Submit" as="button" type="submit" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p></div>
|
|
<div class="catalog-card-footer"><span>25 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="ButtonGroup" size="default" title="Button Group example" description="A polished default button group for a modern application." items="[{"id":"button-group-0-1","key":"button-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/button-group">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Card" size="default" title="Card example" description="A polished default card for a modern application." items="[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Carousel" size="default" title="Carousel example" description="A polished default carousel for a modern application." items="[{"id":"carousel-0-1","key":"carousel-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="ChatBubble" size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items="[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/chat-bubble">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Collapse" size="default" items="[{"id":"collapse-0-1","key":"collapse-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#collapse-demo","actionHref":"#collapse-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" multiple="false" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p></div>
|
|
<div class="catalog-card-footer"><span>5 props · 1 slots</span><a href="/components/collapse">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
|
|
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/date-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="DeviceFrame" size="default" title="Device Frame example" description="A polished default device frame for a modern application." items="[{"id":"device-frame-0-1","key":"device-frame-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Device Frame</h2><p>Theme-aware, responsive device frame component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/device-frame">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="FileUploadProgress" size="default" label="File Upload Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="LegendIndicator" size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items="[{"id":"legend-indicator-0-1","key":"legend-indicator-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Legend Indicator</h2><p>Theme-aware, responsive legend indicator component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/legend-indicator">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="List" size="default" title="List example" description="A polished default list for a modern application." items="[{"id":"list-0-1","key":"list-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#list-demo","actionHref":"#list-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-0-2","key":"list-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-demo","actionHref":"#list-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>List</h2><p>Theme-aware, responsive list component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="ListGroup" size="default" title="List Group example" description="A polished default list group for a modern application." items="[{"id":"list-group-0-1","key":"list-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>List Group</h2><p>Theme-aware, responsive list group component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Marquee" size="default" title="Marquee example" description="A polished default marquee for a modern application." items="[{"id":"marquee-0-1","key":"marquee-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#marquee-demo","actionHref":"#marquee-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"marquee-0-2","key":"marquee-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#marquee-demo","actionHref":"#marquee-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/marquee">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Progress" size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Progress</h2><p>Theme-aware, responsive progress component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 0 slots</span><a href="/components/progress">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Rating" size="default" title="Rating example" description="A polished default rating for a modern application." items="[{"id":"rating-0-1","key":"rating-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Skeleton" label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton component.</p></div>
|
|
<div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/skeleton">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Spinner" label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner component.</p></div>
|
|
<div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/spinner">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="StyledIcon" size="default" title="Styled Icon example" description="A polished default styled icon for a modern application." items="[{"id":"styled-icon-0-1","key":"styled-icon-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#styled-icon-demo","actionHref":"#styled-icon-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"styled-icon-0-2","key":"styled-icon-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#styled-icon-demo","actionHref":"#styled-icon-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Styled Icon</h2><p>Theme-aware, responsive styled icon component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Timeline" size="default" title="Timeline example" description="A polished default timeline for a modern application." items="[{"id":"timeline-0-1","key":"timeline-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#timeline-demo","actionHref":"#timeline-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"timeline-0-2","key":"timeline-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#timeline-demo","actionHref":"#timeline-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="Toast" size="default" title="Toast example" description="A polished default toast for a modern application." items="[{"id":"toast-0-1","key":"toast-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#toast-demo","actionHref":"#toast-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"toast-0-2","key":"toast-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#toast-demo","actionHref":"#toast-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/toast">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><div data-component="TreeView" size="default" title="Tree View example" description="A polished default tree view for a modern application." items="[{"id":"tree-view-0-1","key":"tree-view-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"tree-view-0-2","key":"tree-view-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Base</span><h2>Tree View</h2><p>Theme-aware, responsive tree view component.</p></div>
|
|
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/tree-view">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article></div>
|
|
}
|
|
}
|