Lily Design System is a free open source design system that anyone can use and improve.
This is brand new work and we welcome collaboration, guidance, and feedback.
Contact joel@joelparkerhenderson.com
Lily is headless: the components ship semantic HTML, ARIA, and keyboard behaviour, and you ship every visual decision. The same markup, styled by an example app's stylesheet and bare:
Lily targets WCAG 2.2 AAA — and says precisely what that does and does not mean in the accessibility statement.
Packages publish with npm provenance today; long-lived registry tokens are slated for replacement by Trusted Publishing once it covers every forge and registry this project treats as a peer.
The living specification is spec/index.md. The modular reference docs are in AGENTS.md and AGENTS/. For a topic-by-topic walkthrough, see the modular specification docs under spec/.
Lily is a stack of layers, each owning one job: the catalog (607 named components, components.tsv), headless libraries (the catalog as unstyled, accessible components in nine frameworks), helpers (packages that own a whole interaction: pickers, data grid, kanban board, calendar, Gantt chart, filter), themes (63 stylesheets), examples (styled apps, one per framework) and skills (instructions for AI agents). Which one to reach for: the site page How the pieces fit.
Twenty-seven Claude Skills give an AI
coding agent a curated entry point, in three tiers:
lily-design-system-skill for people
building with Lily (concepts, naming, composition patterns),
lily-design-system-maintainer-skill
for people working on this monorepo (required files, bin/ tooling,
the spec-driven workflow), eight framework-umbrella skills
({framework}-skill) that map a framework's headless/helpers/example-app
subprojects and point down into the more specific skills, and sixteen
framework-specific skills — one {framework}-headless-skill and one
{framework}-helpers-skill per framework family (angular, blazor, html,
nunjucks, react, svelte, vue, web-components) — each scoped to exactly
the one real subproject it covers, plus
lily-design-system-alpine-headless-skill
for the Alpine.js catalog. All 27 live at this monorepo's root (their
standalone mirror repositories were retired on 2026-10-10). See
spec/agent-skills/ for the full list, or
the docs site's Lily + Claude Code
page for a guided tour.
llms.txt and llms.json
give any LLM tool a curated map of the project's most important content,
following the llms.txt convention; the docs site
publishes its own pair at its own root with site-appropriate links. See
spec/agent-skills/ and
spec/llms-json-and-llms-txt/.
How AI tools are actually used to build this project — disclosure, human oversight, quality controls, and the standing authorization for an agentic Claude Code session to decide a specific release is ready and publish it for real — is AI_STATEMENT.md and GOVERNANCE.md § AI agent publish authority, not this section.
Batteries-included web examples that demonstrate components in real apps:
- HTML CSS JS examples
- Svelte SvelteKit examples
- React Next.js examples
- Vue Nuxt.js examples
- Angular Analog examples
- Blazor Web examples
- Nunjucks Eleventy examples
- Alpine.js examples
Headless versions if you want to use components with all your own styles:
- HTML headless
- Svelte headless
- React headless
- Vue headless
- Angular headless
- Blazor headless
- Nunjucks headless
- Web Components headless — an 8th catalog at its full achievable scope (572 of 607; the remaining 35 are permanently excluded, not backlog)
- Alpine.js headless — a 9th catalog, added 2026-10-21: all 607 components as annotated HTML snippets plus one Alpine plugin (
@lilydesignsystem/alpine-headless, not yet published), with its own example app and six helpers: the data grid, kanban board, calendar, Gantt chart, Markdown editor and Org editor
Small, opinionated helper packages for every framework, one top-level
subproject each.
Each of the eight frameworks ships eleven *-picker helpers — 88 packages in all — plus picker-bar, the grid-like data-grid, kanban-board,
gantt-chart, calendar and filter, the markdown-editor and org-editor, and locale-translations (20 per framework; with
nunjucks-listbox-behavior and the six Alpine.js packages, 167 helper packages in all), and each owns one complete interaction end to end:
-
theme-picker, locale-picker, text-size-picker, motion-picker and time-zone-picker own a user preference: selection, DOM application (
data-theme,lang/dir,data-text-size,data-motion,data-time-zone), and optionallocalStoragepersistence. Each is an icon button opening a WAI-ARIA APG listbox; motion-picker's initial value defers to the platform's own(prefers-reduced-motion: reduce)signal. -
share-picker owns an action: the native share sheet where the platform has one, else a disclosure of consumer-supplied destinations plus copy-the-URL. Applies nothing, persists nothing.
-
search-picker owns an action too: a magnifying-glass icon opening a search field and a
⏎submit button; a search forfooperforms a GET to/?foo. Applies nothing, persists nothing. -
link-picker owns an action: a home icon opening a disclosure of the page links the app defines. Applies nothing, persists nothing.
-
menu-picker and settings-picker own an interaction with no content of their own: a hamburger or a cog icon opening a dropdown of whatever the app provides (links, buttons, a form). Applies nothing, persists nothing.
-
date-time-picker owns a form value: a typeable text field plus an APG date-picker dialog, locale-correct from
Intl. Applies nothing, persists nothing — a date in a form is data, not a preference. -
HTML helpers, one top-level subproject per package:
-
Svelte helpers (canonical reference), one top-level subproject per package:
-
React helpers, one top-level subproject per package:
-
Vue helpers, one top-level subproject per package:
-
Angular helpers, one top-level subproject per package:
-
Blazor helpers, one top-level subproject per package:
-
Nunjucks helpers, one top-level subproject per package:
-
Web Components helpers — an independent copy of the HTML helpers with
lily-*tags, one top-level subproject per package: -
Alpine.js helpers, one top-level subproject per package (unpublished; each a subset of its Svelte reference):
The themes/ directory ships 63 standalone reference theme stylesheets that target the Lily™ class hooks — NHS England, NHS Scotland, and NHS Wales (patient and practitioner variants), GOV.UK GDS, USWDS, Adobe Spectrum, Mozilla Protocol, Ant Design, Atlassian, Excel, Fluent, GitHub Primer, IBM Carbon, Linear, Notion, Salesforce, SAP Fiori, Vercel, and general-purpose light/dark themes. The theme-picker helper loads them at runtime.
The canonical catalog is components.tsv — 607 components. Each slug below links to the per-component documentation.
- accordion-checkbox: a checkbox option that reveals an accordion panel when checked
- accordion-link: an accordion link
- accordion-list: an accordion ordered list of list item components
- accordion-list-item: an accordion list item component
- accordion-nav: an accordion navigation area for collapsible accordion information
- action-bar: a contextual action bar that appears when items are selected, showing the selection count and bulk action buttons
- action-bar-button: one action button inside an action bar
- action-group: a group of action buttons that can collapse to an overflow menu when space is constrained
- action-link: a hyperlink styled as an action trigger
- address-input: an input for searching or manually entering an address
- addressograph-box: a box that shows a person's identification details, such as name, tracking information, and salient notations
- affix: a wrapper that pins its content to a viewport position while the page scrolls
- ai-label: an indicator of AI instances that is a pathway to AI explainability
- alert: a status message for important information or feedback
- alert-dialog: a modal dialog for urgent messages requiring user acknowledgment
- angle-slider-range-input: a range input for selecting an angle in degrees
- announcement-banner: a banner highlighting important messages for all users
- answer: an answer is anything that responds to a question, request, action, etc.
- area-chart: an area chart visualization showing sized components in continuous data
- article-layout: a top-level article wrapper that sets CSS custom properties for content column widths
- aspect-ratio-container: a container that maintains a fixed aspect ratio
- autosuggest: a text input that proposes matching options as users type
- avatar: an avatar indicator that shows an avatar image or avatar text
- avatar-group: a group of avatar components
- avatar-image: an avatar indicator inside image such as a user photo
- avatar-text: an avatar indicator inner text such as a user name
- back-link: a navigation link to return to a previous page
- badge: a small label for counts, statuses, or categories
- banner: a prominent message bar across the top of a page
- banner-box: a banner box that is inside a banner component, using flexbox horizontal
- bar-chart: a horizontal bar chart visualization for displaying data
- barcode-image: a visual machine-readable symbolic code image, such as for a scanner
- beach-ball: a decorative animated beach ball element
- blockquote: a block-level quotation with optional source citation
- body-text: a rendered text block within a content width container
- breadcrumb-link: one breadcrumb link in the trail
- breadcrumb-list: an ordered list of breadcrumb list items
- breadcrumb-list-item: one breadcrumb list item in the trail
- breadcrumb-nav: a navigation container for breadcrumb trail links
- button: a generic clickable button element
- button-group: a wrapper that groups related buttons together
- button-input: an input element of type button for form actions
- byline: an author attribution with publish and update timestamps
- calendar-range-picker: a picker for selecting a date range on a calendar
- calendar-table: a calendar table interactive grid for managing dates, days, etc.
- calendar-table-body: a calendar table interactive grid tbody for managing dates, days, etc.
- calendar-table-foot: a calendar table interactive grid tfoot for managing dates, days, etc.
- calendar-table-head: a calendar table interactive grid thead for managing dates, days, etc.
- calendar-table-row: a calendar table interactive grid row for managing dates, days, etc.
- calendar-table-td: a calendar table interactive grid data cell for managing dates, days, etc.
- calendar-table-th: a calendar table interactive grid header cell for managing dates, days, etc.
- call-to-action: a prominent prompt encouraging user action
- caption: a caption for a table or figure element
- card: a grouped content container with header, body, and footer areas
- care-card: a medical care instruction card with urgency levels
- carousel: a slideshow for cycling through content items
- cascader: a multi-level dropdown for selecting a value from a hierarchy
- character: a single character display element
- character-counter: a counter showing remaining or used characters in a text field
- chat-list: an ordered list of chat list item components
- chat-list-item: one chat list item component, typically containing one chat message component
- chat-message: a chat message shows one chat conversation message entry and all its data, including the author avatar, author name, time, etc.
- chat-nav: a navigation container for chat information
- check-list: an ordered list of check list item components
- check-list-item: one check list item component with a checkbox
- checkbox-group: a group component that manages a collection of checkboxes with shared state
- checkbox-input: a checkbox input for toggling a boolean value
- citation: a citation acknowledges the relevance of a work of another to the topic of discussion
- clamp-text: a text container that truncates content to a maximum number of lines
- clipboard-copy-button: a button that copies text to the clipboard
- coachmark: an anchored popover that spotlights and explains a single feature
- code: an inline code span for displaying short code snippets within surrounding text
- code-block: a block of formatted code with optional line numbers and line highlighting
- collapsible: a container that can be expanded or collapsed
- collection-list: a compact list of multiple related items such as articles or events
- collection-list-item: one item in a collection list with optional image, heading, meta, and description
- color-input: an input for selecting a color value
- color-picker: a two-dimensional board for picking colors by hue and saturation
- color-picker-button: a button showing a color swatch in a color picker
- column-chart: a vertical column chart visualization for displaying data
- combobox: a text input combined with a dropdown list for filtering options
- command: a command palette for searching and executing actions
- comment: a comment is anything that expresses an opinion, observation, explanation, etc.
- container: a generic block-level content container
- container-with-fixed-width: a centered content wrapper with a fixed max-width breakpoint
- container-with-fluid-width: a full-width content wrapper with horizontal padding
- content-block: a content width constraint container with named column widths
- contents-link: one table of contents link
- contents-list: an contents ordered list of contents list item components
- contents-list-item: one contents list item
- contents-nav: a contents navigation area
- context-menu: a menu that appears on right-click or long-press
- context-menu-item: one item in a context menu
- contextual-help: a help button that opens a popover with explanatory content
- currency-input: a locale-aware currency input with automatic formatting, symbols, separators
- data-filter-form: a form for filtering data by criteria
- data-table: a data table interactive grid for displaying and sorting tabular data
- data-table-body: a data table interactive grid tbody for displaying and sorting tabular data
- data-table-foot: a data table interactive grid tfoot for displaying and sorting tabular data
- data-table-head: a data table interactive grid thead for displaying and sorting tabular data
- data-table-row: a data table interactive grid row for displaying and sorting tabular data
- data-table-td: a data table interactive grid data cell for displaying and sorting tabular data
- data-table-th: a data table interactive grid header cell for displaying and sorting tabular data
- date-field: a structured field for entering date components
- date-input: an input for entering a date value
- date-range: paired start and end date inputs
- date-time-local-input: an input for entering a date and time without time zone
- date-time-now-input: an input for entering a date and time and "now" button
- date-time-view: a read-only display of a formatted date and time
- description-list: a definition list displaying information in key-value format
- description-list-item: one key-value pair in a description list using dt and dd elements
- details: a disclosure widget that shows and hides content
- dial: a rotary dial control for selecting a value
- dial-group: a group of dial components
- dialog: a modal or non-modal dialog window
- diff: a side-by-side comparison of two items
- digital-object-identifier-link: a permanent hyperlink for a Digital Object Identifier (DOI) to an electronic source
- do-list: a guideline list of encouraged do-list-item components
- do-list-item: an encouraged-practice item in a do-list guideline list
- document-list: a list displaying documents with titles and metadata
- document-list-item: one document entry in a document list
- dont-list: a guideline list of discouraged dont-list-item components
- dont-list-item: a discouraged-practice item in a dont-list guideline list
- download-button: a download link styled as a button, with optional file size and format metadata
- draft: an early preliminary version of content such as an article, email, report, etc.
- drawer: a panel that slides in from the edge of the screen
- dropdown-menu: a menu that opens below a trigger button
- editable: an inline-editable text element that toggles between view and edit modes
- editable-form: a form wrapper for inline editing of content
- email-input: an input for entering an email address
- email-link: a mailto hyperlink for an email address
- emoji: a single emoji character with accessible name
- emoji-character-picker: a picker for browsing and selecting emoji characters
- end-notes: a section of titled endnote items at the end of an article
- error-message: an error message associated with a form field
- error-summary: a summary of all validation errors on a form
- event: an event component that contains other event-related information
- expander: a control that expands to reveal more content
- feature-card: a large content card with a prominent image positioned alongside or above the text
- feature-photo: a responsive photo with lazy loading and alt text validation
- field: a form field wrapper with label, input, and error message
- fieldset: a group of related form fields with a legend
- figure: a self-contained figure with optional caption
- file-dialog: a dialog for browsing and selecting files
- file-input: an input for selecting files from the file system
- file-manager: a file browser for navigating and managing files
- file-upload: a drag-and-drop area for uploading files
- five-face-rating-picker: a picker for selecting a 1-5 satisfaction rating using face labels
- five-face-rating-picker-button: a picker button for selecting a 1-5 satisfaction rating using face labels
- five-face-rating-view: a read-only display of a five-face satisfaction rating
- five-star-rating-picker: a picker for selecting a 1-5 star rating using radio buttons
- five-star-rating-picker-button: a picker button for selecting a 1-5 star rating using radio buttons
- five-star-rating-view: a read-only display of a five-star rating
- flair: a decorative highlight or emphasis element
- flex-stack: a flex layout container for vertical or horizontal stacking with consistent gap
- float-button: a floating action button anchored to a viewport corner
- floating-panel: a panel that floats above page content
- footer: a page or section footer area
- footnote: a footnote reference and content element
- form: a form element for collecting and submitting user data
- framer: a container for framed content display with decorative border
- gantt-table: a Gantt chart table interactive grid for planning schedule visualization
- gantt-table-tbody: a Gantt chart table interactive grid tbody for planning schedule visualization
- gantt-table-td: a Gantt chart table interactive grid data cell for planning schedule visualization
- gantt-table-th: a Gantt chart table interactive grid header cell for planning schedule visualization
- gantt-table-tr: a Gantt chart table interactive grid row for planning schedule visualization
- go-to-next-section: a link that takes users to the next section of the current page
- go-to-previous-section: a link that takes users to the previous section of the current page
- go-to-top: a link that returns users to the top of a long page
- government-banner: a banner identifying a website as belonging to a government, with an expandable details panel
- government-identifier: an identifier section with a parent agency logo, agency name, and required government links
- grail-layout: a responsive web design structure with header, left aside, center main, right aside, footer
- grail-layout-bottom-footer: grail layout bottom footer full width with tag
- grail-layout-center-main: grail layout center main content with tag
- grail-layout-left-aside: grail layout left aside sidebar with tag
- grail-layout-right-aside: grail layout right aside sidebar with tag
- grail-layout-top-header: grail layout top header full width with tag
- graphic-block: a wrapper for charts and graphics with title, description, notes, and ARIA description
- grid: a CSS grid layout container with configurable columns and gap
- hamburger-menu: a toggle button that opens a mobile navigation menu
- header: a page or section header area
- headline: a page headline with heading, subtitle, and byline area
- hero: a large box or image with a title and description
- hero-headline: a full-bleed hero section with headline overlaid on media
- hidden-input: a hidden input for including data in form submission
- hint: hint text providing guidance for a form field
- horizontal-scroller: a horizontally scrollable content container
- hover-card: a card that appears on hover over a trigger element
- icon: a container for displaying an icon
- icon-button: a button containing only an icon with a required accessible label
- icon-list: an ordered list of icon list item components
- icon-list-item: one item in an icon list with a leading icon slot
- image: an image element with alt text
- image-cropper: a container for cropping and resizing an image to a selected region
- image-file-input: an input for selecting image files with preview
- image-input: a graphical submit button that displays an image
- info-state: a composition of illustration, title, description, and action for empty, error, or info states
- information-callout: a callout box highlighting informational content
- input: a generic HTML input element
- input-group: a group wrapping an input with prefix and suffix addons
- input-with-mask: an input displaying a format mask placeholder for the user to fill in
- inset-text: indented text to distinguish it from surrounding content
- kanban-table: a kanban board table interactive grid for organizing items by status
- gantt-table-tfoot: a Gantt chart table interactive grid tfoot for planning schedule visualization
- gantt-table-thead: a Gantt chart table interactive grid thead for planning schedule visualization
- kanban-table-body: a kanban board table interactive grid tbody for organizing items by status
- kanban-table-foot: a kanban board table interactive grid tfoot for organizing items by status
- kanban-table-head: a kanban board table interactive grid thead for organizing items by status
- kanban-table-row: a kanban board table interactive grid row for organizing items by status
- kanban-table-td: kanban board table interactive grid data cell for organizing items by status
- kanban-table-th: a kanban board table interactive grid header cell for organizing items by status
- kbd: show keyboard shortcuts and key combinations in a styled inline element
- label: a label associated with a form input
- line-chart: a line chart visualization connecting data points to display data
- listbox: a list of selectable options with keyboard navigation
- loading: a loading indicator, such as text, or image, or animation
- masonry: a masonry layout container for variable-height items
- measurement-instance-input: an input for entering a measurement value and unit
- measurement-instance-view: a read-only display of a measurement value and unit
- measurement-system-input: an input for selecting a measurement system
- measurement-system-view: a read-only display of a measurement system
- measurement-unit-input: an input for selecting a measurement unit
- measurement-unit-view: a read-only display of a measurement unit
- medical-banner: a prominent message bar across the top of a page, with medical information
- medical-banner-box: a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information
- medical-banner-box-for-advice: a medical record banner box for advice information e.g. contacts, contexts, plans, etc.
- medical-banner-box-for-danger: a medical record banner box for danger information e.g. reactions, warnings, alarms, etc.
- mentions-input: a text input with at-mention autocomplete suggestions
- menu: a list of actions or options triggered by a button
- menu-bar: a horizontal bar of menu triggers
- menu-bar-button: one item in a menu bar
- menu-group: a labeled section of menu items within a menu
- menu-item: one item in a menu
- meter: a gauge displaying a scalar value within a known range
- mockup-browser: a box area that looks like a web browser
- mockup-laptop: a box area that looks like a laptop computer
- mockup-phone-landscape: a box area that looks like a mobile phone in landscape orientation
- mockup-phone-portrait: a box area that looks like a mobile phone
- mockup-shell: a box area that looks like a terminal shell
- mockup-tablet-landscape: a box area that looks like a tablet computer in landscape mode
- mockup-tablet-portrait: a box area that looks like a tablet computer in portrait mode
- mockup-watch: a box area that looks like a smart watch
- mockup-window: a box area that looks like a desktop window
- month-input: an input for selecting a month and year
- mutually-exclusive: a container ensuring only one option can be selected from a group
- navigation-menu: a site-wide navigation menu with links
- net-promoter-score-picker: a picker for selecting a 0-10 Net Promoter Score
- net-promoter-score-picker-button: a picker button for selecting a 0-10 Net Promoter Score
- net-promoter-score-view: a read-only display of a Net Promoter Score
- newsletter-signup: an email subscription form composition with idle, submitting, success, and error states
- notification: a brief message about an event or update
- number-input: an input for entering a numeric value with validation
- option: an option element within a select dropdown
- organization: an organization component that contains other organization-related information
- overlay-container: a full-viewport overlay backdrop for modals and sheets
- padding-reset: a container that resets padding inside fluid-width containers
- pagination-link: one pagination link in the trail
- pagination-list: an ordered list of pagination list items
- pagination-list-item: one pagination list item in the trail
- pagination-nav: an ordered list of page navigation links
- panel: a generic content panel with optional heading
- password-input: an input for entering a password with obscured text
- password-input-or-text-input-div: an input for entering a password or text with show/hide toggle
- person: a person component that contains other person-related information
- phase-banner: a banner showing service development phase and inviting feedback
- photo-pack: a collection of photos displayed together as a group
- pictogram: an icon-based component pairing an icon with a title and description in a centered or side layout
- pin-input-div: a series of single-digit inputs for entering a PIN or OTP code
- place: a place component that contains other place-related information
- popconfirm-dialog: a popover dialog with confirm and cancel buttons
- popover: a floating content box anchored to a trigger element
- popup: a temporary overlay that appears above page content
- postal-code-input: an input for entering a postal or ZIP code
- postal-code-view: a read-only display of a postal or ZIP code
- product-card: a specialized card for displaying a product with image, title, price, and actions
- progress: a horizontal progress bar showing completion
- progress-bar: a horizontal progress indicator
- progress-circle: a circular progress indicator
- progress-spinner: an indeterminate spinning progress indicator
- qr-code-image: a QR code image generated from text or URL data
- question: a question is anything that asks for information, invites a response, tests knowledge, etc.
- radio-group: a group of radio buttons for selecting one option
- radio-input: a single radio button input
- range-input: a slider input for selecting a value within a range
- red-amber-green-picker: a picker for selecting a red/amber/green status
- red-amber-green-picker-button: a picker button for selecting a red/amber/green status
- red-amber-green-view: a read-only display of a red/amber/green status
- red-orange-yellow-green-blue-picker: a picker for selecting a five-level color status
- red-orange-yellow-green-blue-picker-button: a picker button for selecting a five-level color status
- red-orange-yellow-green-blue-view: a read-only display of a five-level color status
- related-content: a section providing links to related or supporting information
- reset-input: a button input that resets a form to default values
- resizable: a container that the user can resize by dragging
- review-date: a display of a content review date
- scatter-chart: a scatter chart visualization using dots to display data
- screen-reader-span: a visually hidden span of text intended for screen readers to provide more descriptive labels
- scroll-area: a scrollable container with custom scrollbar support
- scroll-bar: a custom scrollbar element
- scroller: a scrollytelling container with step-based foreground and background composition
- scroller-base: a low-level scroll position tracking primitive for scrollytelling
- scroller-video: a video-driven scrollytelling component with frame-by-frame scrubbing
- search-input: an input for entering a search query
- section-heading: a styled heading introducing a major content section, with optional eyebrow and subtitle
- section-link: one section link in the navigation
- section-list: a list of section navigation items
- section-list-item: one section navigation item
- section-nav: a navigation container for section navigation links
- segment-group: a group of mutually exclusive segment options
- segment-group-item: one selectable segment in a segment group
- select: a dropdown select element for choosing one option
- select-with-extras: a select dropdown with additional features like search or groups
- separator: a horizontal or vertical divider between content sections
- share-page: a component for sharing the page on social media
- sheet: a panel that slides in from a screen edge as an overlay
- sidebar: a side panel for navigation or supplementary content
- signature-pad: a drawing area for capturing a handwritten signature
- skeleton: a placeholder loading animation for content
- skip-link: a hidden link for keyboard users to skip to main content
- slide-out-drawer: a drawer that slides out from the side of the page
- slider: a draggable control for selecting a value along a track
- slider-button: a button with a slider that the user needs to slide to confirm
- sonner: a toast notification manager
- sparkline: a small inline chart showing a data trend
- split-button: a button with a primary action and a dropdown for related actions
- split-view: a two-panel resizable layout container with a draggable divider between them
- splitter: a draggable divider for resizing adjacent panels
- statistic: a numeric value display with title, prefix, and suffix
- status-light: a small colored dot status indicator paired with a status label
- status-tag: a tag showing the current status of a task
- step-list: an ordered list of step items showing progress through a multi-step process
- step-list-item: one step in a step list with status of waiting, in progress, finished, or error
- sticky-promo-banner: a fixed-position promotional banner with a dismiss button
- submit-input: a button input that submits a form
- success-panel: a panel confirming a task has been completed
- summary-box: a boxed callout highlighting key takeaways or next steps from a longer page
- summary-list: an ordered list of key-value summary pairs
- summary-list-item: one key-value pair in a summary list
- super-banner: a super-banner communicates a high-priority state that affects an entire app, experience, process, or system
- switch-button: a toggle switch for turning a setting on or off
- tab-bar: a group of tabs for switching between content panels
- tab-bar-button: one tab button in a tab group
- tab-panel: a content panel associated with a tab in a tab bar
- table: a table with rows and columns
- table-body: a table interactive grid tbody
- table-foot: a table interactive grid tfoot
- table-head: a table interactive grid thead
- table-row: a table interactive grid row
- table-td: a table interactive grid data cell
- table-th: a table interactive grid header cell
- tag: a keyword label for categorizing content
- tag-group: a group of tag elements
- tag-input: an input for adding and removing tags
- task-bar: a horizontal bar of task shortcuts or actions
- task-bar-button: one item in a task bar
- task-list: an ordered list of task list items
- task-list-item: one task item with a checkbox and label
- tel-input: an input for entering a telephone number
- tel-link: a tel hyperlink for a telephone number
- text-area-input: a multi-line text input area
- text-area-input-with-character-counter: a multi-line text area input with a caption below that is a character counter "[number] of [maximum] characters"
- text-input: a single-line text input field
- text-input-with-search: a single-line text input field with search capability
- theme-provider: a container that applies CSS custom properties from a theme object to its children
- theme-select: a select dropdown for choosing a theme
- theme-select-option: one option in a theme select dropdown
- theme-view: a read-only display of the current theme
- tile: a grouping container that presents related content in a structured format, often as a single clickable area
- tile-map: a tile cartogram map with configurable layers for geographic data visualization
- time-input: an input for entering a time value
- time-picker-input: an input with a dropdown for picking a time
- timeline-list: an ordered list of chronological events or milestones
- timeline-list-item: one event in a timeline list
- timeout-dialog: a modal dialog warning users before session timeout
- timer: a countdown or elapsed time display
- timer-button: a button with a timer that will automatically click after a given amount of time
- toast: a brief auto-dismissing notification message
- toggle-button: a button that toggles between pressed and unpressed states
- toggle-group: a group of toggle buttons for selecting options
- tool-bar: a horizontal bar of tool actions
- tool-bar-button: one action button in a tool bar
- tooltip: a small popup showing descriptive text on hover or focus
- tour: a tour guide, such as for sightseeing, or pathways, or demonstrations, etc.
- tour-list: an ordered list of tour guide steps
- tour-list-item: one step in a tour guide list
- transfer-list: a dual list box for moving items between two lists
- tree-link: one link in the tree
- tree-list: a hierarchical list with nested expandable items
- tree-list-item: one item in a tree navigation list
- tree-menu: a hierarchical tree menu with expandable branches
- tree-nav: a hierarchical navigation with expandable branches
- tree-select: a select dropdown showing a tree of hierarchical options
- url-input: an input for entering a URL
- validation-list: a live-feedback list of input validation rules with pending, passed, and failed states
- validation-list-item: one validation rule in a validation list with a status of pending, passed, or failed
- video-player: a video player with play-in-view behavior, custom controls, and IntersectionObserver support
- visible: an IntersectionObserver wrapper that exposes element visibility state
- warning-callout: a callout box highlighting a warning message
- watermark: a decorative repeating overlay text or image marking a page
- week-input: an input for selecting a week and year
- one-time-password-input: a single one-time-password input with a numeric keypad, SMS autofill, and a fixed length
- multi-select: a native select that allows choosing several options at once
- multi-select-with-extras: a multiple-choice select with additional features like search, groups, or selected-value chips
- empty-state: a placeholder shown when a list, table, or view has nothing to display yet, with room for guidance and an action
- show-more: a content region clamped to a shorter height with a button that reveals the rest
- kbd-shortcut: a keyboard shortcut made of one or more key caps, for example Ctrl plus K
- calendar-year-table: a calendar grid showing the twelve months of one year
- calendar-month-table: a calendar grid showing the days of one month
- calendar-week-table: a calendar grid showing the seven days of one week
- calendar-day-table: a calendar grid showing the time slots of one day
- thinking: a collapsible block that shows an AI agent's reasoning or thinking, closed by default
- gauge-chart: a dial chart showing one value within a range, with optional thresholds
- heatmap-chart: a grid chart where cell colour encodes the value at each row and column
- radar-chart: a chart plotting several axes from a shared centre as a polygon
- sankey-chart: a flow chart where link width encodes the quantity moving between nodes
- file-tree: a hierarchical tree of folders and files with expandable folders
- pie-chart: a circular chart divided into slices that show each part of a whole
- ring-chart: a pie chart with a hollow centre, often used to show progress or a share of a total
- funnel-chart: a chart of stages narrowing from top to bottom, showing how a quantity drops at each step
- candlestick-chart: a financial chart showing open, high, low and close values for each period as candles
- composed-chart: a chart that combines several chart types, such as bars and a line, on shared axes
- choropleth-chart: a map chart that shades regions by the value of a measure
- sunburst-chart: a radial chart showing a hierarchy as concentric rings of arcs
- streaming-text: text that arrives in chunks, as an AI answer streams in, announced once to screen readers when complete
- tool-call: a collapsible record of one tool invocation by an AI agent, with a name, a status word, and its input, output or error
- tool-call-name: the name of the tool in a tool call, shown in the summary
- tool-call-status: the status of a tool call as a word, such as pending, running, done or error
- tool-call-input: the input or arguments passed to a tool in a tool call
- tool-call-output: the output or result returned by a tool in a tool call
- tool-call-error: the error shown when a tool call fails
- mark: an inline highlight marking text as relevant or referenced, such as a search match, using the native mark element
- chat-composer: a chat input form with a text area that grows with its content, sends on Enter, and turns its send button into a stop button while a reply is in progress
- heatmap-chart-with-year-of-days: a heatmap chart of one year of days, one cell per day in week columns and weekday rows
- middle-truncation: a string shortened in the middle to fit its width, keeping the start and the end
- wheel-picker: a vertical single-select listbox where the selection follows the cursor, for choosing one of a short list by scrolling or typing
- convert-div: a group that converts a value from one unit into another, such as dollars into euros or miles into kilometres
- convert-from-div: the source side of a conversion, holding the value and unit to convert from
- convert-from-value-div: the value to convert from, such as a text input holding the number of dollars
- convert-from-unit-div: the unit to convert from, such as a select box of currencies or lengths
- convert-into-div: the target side of a conversion, holding the value and unit to convert into
- convert-into-value-div: the converted value, such as a text input showing the number of euros
- convert-into-unit-div: the unit to convert into, such as a select box of currencies or lengths
- picture: a responsive image wrapper that lets the browser choose among several sources, using the native picture element
- warning-text: a short warning shown as an icon and a bold line of text, with a visually hidden prefix supplied by the consumer
- alba-community-health-index-input: an input for entering Scotland's Community Health Index (CHI)
- alba-community-health-index-view: a read-only display of Scotland's Community Health Index (CHI)
- aotearoa-national-health-index-input: an input for entering New Zealand's National Health Index (NHI) Number
- aotearoa-national-health-index-view: a read-only display of New Zealand's National Health Index (NHI) Number
- argentina-codigo-unico-de-identificacion-laboral-input: an input for entering Argentina's Codigo Unico de Identificacion Laboral (CUIL)
- argentina-codigo-unico-de-identificacion-laboral-view: a read-only display of Argentina's Codigo Unico de Identificacion Laboral (CUIL)
- as-saudiyah-raqm-al-huwiyah-al-wataniyah-input: an input for entering Saudi Arabia's National Identification Number
- as-saudiyah-raqm-al-huwiyah-al-wataniyah-view: a read-only display of Saudi Arabia's National Identification Number
- australia-individual-healthcare-identifier-input: an input for entering Australia's Individual Healthcare Identifier (IHI)
- australia-individual-healthcare-identifier-view: a read-only display of Australia's Individual Healthcare Identifier (IHI)
- australia-tax-file-number-input: an input for entering Australia's Tax File Number (TFN)
- australia-tax-file-number-view: a read-only display of Australia's Tax File Number (TFN)
- belgique-numero-de-registre-national-input: an input for entering Belgium's Numéro de Registre National / Rijksregisternummer (NRN)
- belgique-numero-de-registre-national-view: a read-only display of Belgium's Numéro de Registre National / Rijksregisternummer (NRN)
- bharat-aadhaar-input: an input for entering India's Aadhaar number
- bharat-aadhaar-view: a read-only display of India's Aadhaar number
- brasil-cartao-nacional-de-saude-input: an input for entering Brazil's Cartao Nacional de Saude (CNS)
- brasil-cartao-nacional-de-saude-view: a read-only display of Brazil's Cartao Nacional de Saude (CNS)
- bulgaria-edinen-grazhdanski-nomer-input: an input for entering Bulgaria's Единен граждански номер / Edinen grazhdanski nomer (EGN)
- bulgaria-edinen-grazhdanski-nomer-view: a read-only display of Bulgaria's Единен граждански номер / Edinen grazhdanski nomer (EGN)
- canada-social-insurance-number-input: an input for entering Canada's Social Insurance Number (SIN)
- canada-social-insurance-number-view: a read-only display of Canada's Social Insurance Number (SIN)
- cesko-cestovni-pas-input: an input for entering Czech Republic's Cestovní pas
- cesko-cestovni-pas-view: a read-only display of Czech Republic's Cestovní pas
- cesko-rodne-cislo-input: an input for entering Czech Republic's Rodné číslo (RČ)
- cesko-rodne-cislo-view: a read-only display of Czech Republic's Rodné číslo (RČ)
- chile-rol-unico-nacional-input: an input for entering Chile's Rol Unico Nacional (RUN)
- chile-rol-unico-nacional-view: a read-only display of Chile's Rol Unico Nacional (RUN)
- colombia-cedula-de-ciudadania-input: an input for entering Colombia's Cedula de Ciudadania Number
- colombia-cedula-de-ciudadania-view: a read-only display of Colombia's Cedula de Ciudadania Number
- cymru-rhif-y-gwasanaeth-iechyd-gwladol-input: an input for entering Wales's Rhif y Gwasanaeth Iechyd Gwladol (Rhif GIG)
- cymru-rhif-y-gwasanaeth-iechyd-gwladol-view: a read-only display of Wales's Rhif y Gwasanaeth Iechyd Gwladol (Rhif GIG)
- danmark-personnummer-input: an input for entering Denmark's Personnummer (CPR-nummer) (CPR)
- danmark-personnummer-view: a read-only display of Denmark's Personnummer (CPR-nummer) (CPR)
- deutschland-krankenversichertennummer-input: an input for entering Germany's Krankenversichertennummer (KVNR)
- deutschland-krankenversichertennummer-view: a read-only display of Germany's Krankenversichertennummer (KVNR)
- ecuador-cedula-de-identidad-input: an input for entering Ecuador's Cedula de Identidad Number
- ecuador-cedula-de-identidad-view: a read-only display of Ecuador's Cedula de Identidad Number
- eesti-isikukood-input: an input for entering Estonia's Isikukood (IK)
- eesti-isikukood-view: a read-only display of Estonia's Isikukood (IK)
- eire-individual-health-identifier-input: an input for entering Eire Individual Health Identifier (IHI) unique national healthcare identifier
- eire-individual-health-identifier-view: a read-only display of Eire Individual Health Identifier (IHI) unique national healthcare identifier
- ellada-dematerialised-securities-system-input: an input for entering Greece's Dematerialised Securities System (DSS)
- ellada-dematerialised-securities-system-view: a read-only display of Greece's Dematerialised Securities System (DSS)
- england-national-health-service-number-input: an input for entering England's National Health Service Number (NHS)
- england-national-health-service-number-view: a read-only display of England's National Health Service Number (NHS)
- espana-codigo-de-identificacion-fiscal-input: an input for entering Spain's Código de Identificación Fiscal (CIF)
- espana-codigo-de-identificacion-fiscal-view: a read-only display of Spain's Código de Identificación Fiscal (CIF)
- espana-tarjeta-sanitaria-individual-input: an input for entering an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
- espana-tarjeta-sanitaria-individual-view: a read-only display of an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
- france-numero-d-identification-au-repertoire-input: an input for entering a France numéro d'identification au répertoire (NIR) unique national healthcare identifier
- france-numero-d-identification-au-repertoire-view: a read-only display of a France numéro d'identification au répertoire (NIR) unique national healthcare identifier
- hanguk-jumin-deungnok-beonho-input: an input for entering South Korea's Resident Registration Number
- hanguk-jumin-deungnok-beonho-view: a read-only display of South Korea's Resident Registration Number
- hong-kong-identity-card-input: an input for entering Hong Kong's Identity Card Number
- hong-kong-identity-card-view: a read-only display of Hong Kong's Identity Card Number
- hrvatska-osobni-identifikacijski-broj-input: an input for entering Croatia's Osobni identifikacijski broj (OIB)
- hrvatska-osobni-identifikacijski-broj-view: a read-only display of Croatia's Osobni identifikacijski broj (OIB)
- indonesia-nomor-induk-kependudukan-input: an input for entering Indonesia's Nomor Induk Kependudukan (NIK)
- indonesia-nomor-induk-kependudukan-view: a read-only display of Indonesia's Nomor Induk Kependudukan (NIK)
- iran-kod-e-melli-input: an input for entering Iran's National Code (Kod-e Melli)
- iran-kod-e-melli-view: a read-only display of Iran's National Code (Kod-e Melli)
- island-kennitala-input: an input for entering Iceland's Kennitala
- island-kennitala-view: a read-only display of Iceland's Kennitala
- italia-codice-fiscale-input: an input for entering Italy's Codice fiscale (CF)
- italia-codice-fiscale-view: a read-only display of Italy's Codice fiscale (CF)
- kypros-national-passport-number-input: an input for entering Kypros's National Passport Number
- kypros-national-passport-number-view: a read-only display of Kypros's National Passport Number
- latvija-personas-kods-input: an input for entering Latvia's Personas kods
- latvija-personas-kods-view: a read-only display of Latvia's Personas kods
- liechtenstein-national-identity-card-number-input: an input for entering Liechtenstein's Liechtenstein National Identity Card Number
- liechtenstein-national-identity-card-number-view: a read-only display of Liechtenstein's Liechtenstein National Identity Card Number
- liechtenstein-passport-number-input: an input for entering Liechtenstein's Liechtenstein Passport Number
- liechtenstein-passport-number-view: a read-only display of Liechtenstein's Liechtenstein Passport Number
- lietuva-asmens-kodas-input: an input for entering Lithuania's Asmens kodas
- lietuva-asmens-kodas-view: a read-only display of Lithuania's Asmens kodas
- lietuva-pasas-input: an input for entering Lithuania's Pasas
- lietuva-pasas-view: a read-only display of Lithuania's Pasas
- luxembourg-matricule-input: an input for entering Luxembourg's Numero d'Identification Nationale (Matricule)
- luxembourg-matricule-view: a read-only display of Luxembourg's Numero d'Identification Nationale (Matricule)
- magyarorszag-taj-szam-input: an input for entering Hungary's Tarsadalombiztositasi Azonosito Jel (TAJ)
- magyarorszag-taj-szam-view: a read-only display of Hungary's Tarsadalombiztositasi Azonosito Jel (TAJ)
- malaysia-kad-pengenalan-input: an input for entering Malaysia's MyKad Number (NRIC)
- malaysia-kad-pengenalan-view: a read-only display of Malaysia's MyKad Number (NRIC)
- malta-national-identification-number-input: an input for entering Malta's Malta National Identification Number
- malta-national-identification-number-view: a read-only display of Malta's Malta National Identification Number
- malta-passport-number-input: an input for entering Malta's Malta Passport Number
- malta-passport-number-view: a read-only display of Malta's Malta Passport Number
- mexico-clave-unica-de-registro-de-poblacion-input: an input for entering Mexico's Clave Unica de Registro de Poblacion (CURP)
- mexico-clave-unica-de-registro-de-poblacion-view: a read-only display of Mexico's Clave Unica de Registro de Poblacion (CURP)
- misr-al-raqm-al-qawmi-input: an input for entering Egypt's National Number
- misr-al-raqm-al-qawmi-view: a read-only display of Egypt's National Number
- nederland-burgerservice-nummer-input: an input for entering Netherlands's Burgerservicenummer (BSN)
- nederland-burgerservice-nummer-view: a read-only display of Netherlands's Burgerservicenummer (BSN)
- nederland-identiteitskaart-nummer-input: an input for entering Netherlands's Identiteitskaart Nummer
- nederland-identiteitskaart-nummer-view: a read-only display of Netherlands's Identiteitskaart Nummer
- nederland-paspoort-nummer-input: an input for entering Netherlands's Paspoort Nummer
- nederland-paspoort-nummer-view: a read-only display of Netherlands's Paspoort Nummer
- nigeria-national-identification-number-input: an input for entering Nigeria's National Identification Number (NIN)
- nigeria-national-identification-number-view: a read-only display of Nigeria's National Identification Number (NIN)
- nihon-kojin-bango-input: an input for entering Japan's Individual Number (My Number)
- nihon-kojin-bango-view: a read-only display of Japan's Individual Number (My Number)
- norge-fodselsnummer-input: an input for entering Norway's Fødselsnummer
- norge-fodselsnummer-view: a read-only display of Norway's Fødselsnummer
- osterreich-sozialversicherungsnummer-input: an input for entering Austria's Sozialversicherungsnummer (SVNR)
- osterreich-sozialversicherungsnummer-view: a read-only display of Austria's Sozialversicherungsnummer (SVNR)
- pakistan-computerized-national-identity-card-input: an input for entering Pakistan's Computerized National Identity Card Number (CNIC)
- pakistan-computerized-national-identity-card-view: a read-only display of Pakistan's Computerized National Identity Card Number (CNIC)
- pilipinas-philhealth-identification-number-input: an input for entering the Philippines' PhilHealth Identification Number (PIN)
- pilipinas-philhealth-identification-number-view: a read-only display of the Philippines' PhilHealth Identification Number (PIN)
- polska-numer-identyfikacji-podatkowej-input: an input for entering Poland's Numer Identyfikacji Podatkowej (NIP)
- polska-numer-identyfikacji-podatkowej-view: a read-only display of Poland's Numer Identyfikacji Podatkowej (NIP)
- polska-pesel-input: an input for entering Poland's PESEL
- polska-pesel-view: a read-only display of Poland's PESEL
- portugal-numero-de-identificacao-fiscal-input: an input for entering Portugal's Número de Identificação Fiscal (NIF)
- portugal-numero-de-identificacao-fiscal-view: a read-only display of Portugal's Número de Identificação Fiscal (NIF)
- portugal-passaporte-input: an input for entering Portugal's Passaporte
- portugal-passaporte-view: a read-only display of Portugal's Passaporte
- prathet-thai-lek-prajam-tua-prachachon-input: an input for entering Thailand's National Identification Number
- prathet-thai-lek-prajam-tua-prachachon-view: a read-only display of Thailand's National Identification Number
- romania-cod-numeric-personal-input: an input for entering Romania's Cod Numeric Personal (CNP)
- romania-cod-numeric-personal-view: a read-only display of Romania's Cod Numeric Personal (CNP)
- romania-pasaport-input: an input for entering Romania's Paşaport
- romania-pasaport-view: a read-only display of Romania's Paşaport
- rossiya-snils-input: an input for entering Russia's SNILS Individual Insurance Account Number
- rossiya-snils-view: a read-only display of Russia's SNILS Individual Insurance Account Number
- schweiz-ahv-nummer-input: an input for entering Switzerland's AHV-Nummer / Numero AVS
- schweiz-ahv-nummer-view: a read-only display of Switzerland's AHV-Nummer / Numero AVS
- singapore-national-registration-identity-card-input: an input for entering Singapore's National Registration Identity Card number (NRIC/FIN)
- singapore-national-registration-identity-card-view: a read-only display of Singapore's National Registration Identity Card number (NRIC/FIN)
- slovenija-emso-input: an input for entering Slovenia's Enotna Matična Številka Občana (EMŠO)
- slovenija-emso-view: a read-only display of Slovenia's Enotna Matična Številka Občana (EMŠO)
- slovensko-pas-input: an input for entering Slovakia's Pas
- slovensko-pas-view: a read-only display of Slovakia's Pas
- slovensko-rodne-cislo-input: an input for entering Slovakia's Rodné číslo (RČ)
- slovensko-rodne-cislo-view: a read-only display of Slovakia's Rodné číslo (RČ)
- south-africa-identity-number-input: an input for entering South Africa's Identity Number
- south-africa-identity-number-view: a read-only display of South Africa's Identity Number
- suomi-henkilotunnus-input: an input for entering Finland's Henkilötunnus (HETU)
- suomi-henkilotunnus-view: a read-only display of Finland's Henkilötunnus (HETU)
- sverige-personnummer-input: an input for entering Sweden's Personnummer
- sverige-personnummer-view: a read-only display of Sweden's Personnummer
- taiwan-guomin-shenfenzheng-tongyi-bianhao-input: an input for entering Taiwan's National Identification Card Number
- taiwan-guomin-shenfenzheng-tongyi-bianhao-view: a read-only display of Taiwan's National Identification Card Number
- tuaisceart-eireann-health-and-care-number-input: an input for entering Tuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier
- tuaisceart-eireann-health-and-care-number-view: a read-only display of Tuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier
- turkiye-tc-kimlik-numarasi-input: an input for entering Turkey's T.C. Kimlik Numarasi
- turkiye-tc-kimlik-numarasi-view: a read-only display of Turkey's T.C. Kimlik Numarasi
- ukrayina-reyestratsiyniy-nomer-oblikovoyi-kartky-platnyka-podatkiv-input: an input for entering Ukraine's Taxpayer Registration Card Number (RNOKPP)
- ukrayina-reyestratsiyniy-nomer-oblikovoyi-kartky-platnyka-podatkiv-view: a read-only display of Ukraine's Taxpayer Registration Card Number (RNOKPP)
- united-kingdom-national-health-service-number-input: an input for entering a UK NHS number
- united-kingdom-national-health-service-number-view: a read-only display of a UK NHS number
- united-kingdom-national-insurance-number-input: an input for entering United Kingdom's National Insurance Number (NINO)
- united-kingdom-national-insurance-number-view: a read-only display of United Kingdom's National Insurance Number (NINO)
- united-states-social-security-number-input: an input for entering a US Social Security number
- united-states-social-security-number-view: a read-only display of a US Social Security number
- uruguay-cedula-de-identidad-input: an input for entering Uruguay's Cedula de Identidad Number
- uruguay-cedula-de-identidad-view: a read-only display of Uruguay's Cedula de Identidad Number
- viet-nam-can-cuoc-cong-dan-input: an input for entering Viet Nam's Citizen Identification Number (CCCD)
- viet-nam-can-cuoc-cong-dan-view: a read-only display of Viet Nam's Citizen Identification Number (CCCD)
- yisrael-teudat-zehut-input: an input for entering Israel's Teudat Zehut identity number
- yisrael-teudat-zehut-view: a read-only display of Israel's Teudat Zehut identity number
- zhongguo-jumin-shenfenzheng-haoma-input: an input for entering China's Resident Identity Card Number
- zhongguo-jumin-shenfenzheng-haoma-view: a read-only display of China's Resident Identity Card Number
- Accessible: Semantic HTML elements, ARIA roles and attributes, and keyboard navigation built in. Targets WCAG 2.2 AAA.
- Composable: Compound components (e.g., Nav + List + ListItem, Table + Head + Body + Row + Data) snap together cleanly.
- Internationalizable: All user-facing text comes through props or parameters — no hardcoded strings — so consumers can localize.
- Batteries-included examples: We provide complete styled examples for HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks and Alpine.js.
- Semantic-CSS friendly: If you like semantic CSS classes (e.g., DaisyUI), you can target each component by its kebab-case class name.
- Tailwind friendly: If you like utility CSS classes (e.g., Tailwind), you can layer them on top of the headless components.
- Headless friendly: If you bring your own styles, the headless versions give you semantic HTML and ARIA with no visual styling.
- *Bar *BarButton
- ActionBar ActionBarButton
- MenuBar MenuBarButton
- TabBar TabBarButton
- TaskBar TaskBarButton
- ToolBar ToolBarButton
- *Group *GroupItem
- SegmentGroup SegmentGroupItem
- *Guide *GuideList *GuideListItem
- Tour TourList TourListItem
- *List *ListItem
- CheckList CheckListItem
- CollectionList CollectionListItem
- ContentsList ContentsListItem
- DoList DoListItem
- DontList DontListItem
- IconList IconListItem
- PaginationList PaginationListItem
- StepList StepListItem
- SummaryList SummaryListItem
- ValidationList ValidationListItem
- *Nav *List *ListItem
- AccordionNav AccordionList AccordionListItem
- BreadcrumbNav BreadcrumbList BreadcrumbListItem
- ChatNav ChatList ChatListItem
- ContentsNav ContentsList ContentsListItem
- PaginationNav PaginationList PaginationListItem
- TreeNav TreeList TreeListItem
- *Select *SelectOption
- ThemeSelect ThemeSelectOption
- *Menu *MenuItem
- ContextMenu ContextMenuItem
- Menu MenuItem
- *Input *Link
- EmailInput EmailLink
- TelInput TelLink
- *Picker *PickerButton
- ColorPicker ColorPickerButton
- FiveFaceRatingPicker FiveFaceRatingPickerButton
- FiveStarRatingPicker FiveStarRatingPickerButton
- NetPromoterScorePicker NetPromoterScorePickerButton
- RedAmberGreenPicker RedAmberGreenPickerButton
- RedOrangeYellowGreenBluePicker RedOrangeYellowGreenBluePickerButton
- *Input *View
- PostalCodeInput PostalCodeView
- MeasurementInstanceInput MeasurementInstanceView
- ContainerWith*
- ContainerWithFixedWidth
- ContainerWithFluidWidth
- Table sub-elements:
*TableHead*TableBody*TableFoot*TableRow*TableTH*TableTD- Table TableHead TableBody TableFoot TableRow TableTH TableTD
- CalendarTable CalendarTableHead CalendarTableBody CalendarTableFoot CalendarTableRow CalendarTableTH CalendarTableTD
- DataTable DataTableHead DataTableBody DataTableFoot DataTableRow DataTableTH DataTableTD
- KanbanTable KanbanTableHead KanbanTableBody KanbanTableFoot KanbanTableRow KanbanTableTH KanbanTableTD
- Table sub-elements (gantt uses HTML element names):
*TableThead*TableTbody*TableTfoot*TableTr*TableTh*TableTd- GanttTable GanttTableThead GanttTableTbody GanttTableTfoot GanttTableTr GanttTableTH GanttTableTD
- Package: lily
- Version: 0.9.0 (monorepo tag
v0.9.0; packages are versioned separately) - Created: 2025-08-09T21:09:52Z
- Updated: 2026-10-30T00:00:00Z
- License:
MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause, or contact us for other terms (see LICENSE.md) - Contact: Joel Parker Henderson (joel@joelparkerhenderson.com)
|
|
|
|---|