Lily Design System™ - HTML Headless

A headless plain HTML component library with 490 components. All components are headless (no built-in styles), fully accessible (WCAG 2.2 AAA), and use vanilla JavaScript for interactivity.

Headless means zero CSS, zero styles, zero opinions about appearance. You provide all styling. Components provide structure, semantics, accessibility, and behavior.

Features

• 490 headless HTML components
• Plain HTML and vanilla JavaScript — no frameworks required
• WCAG 2.2 AAA accessibility compliance
• Full keyboard navigation support
• ARIA attributes and roles
• Internationalization-ready (no hardcoded strings)
• Zero dependencies
• Works with any CSS framework or custom styles

Components

• accordion:
  • accordion-nav: a navigation container for collapsible accordion information
  • accordion-list: an ordered list of accordion list item components
  • accordion-list-item: one accordion list item component
  • accordion-link: one accordion link in the trail
• action-link: a hyperlink styled as an action trigger
• ai-label: an indicator of AI instances that is a pathway to AI explainability
• alert-dialog: a modal dialog for urgent messages requiring user acknowledgment
• alert: a status message for important information or feedback
• angle-slider-range-input: a range input for selecting an angle in degrees
• aspect-ratio-container: a container that maintains a fixed aspect ratio
• avatar:
  • avatar: an avatar indicator that shows an avatar image or avatar text
  • 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
• beach-ball: a decorative animated beach ball element
• breadcrumb:
  • breadcrumb-nav: a navigation container for breadcrumb trail links
  • breadcrumb-list: an ordered list of breadcrumb navigation items
  • breadcrumb-list-item: one breadcrumb navigation link in the trail
  • breadcrumb-link: one breadcrumb link in the trail
• button: a generic clickable button element
• button-input: an input element of type button for form actions
• calendar-table:
  • calendar-table: a calendar table interactive grid for managing dates, days, etc.
  • calendar-table-head: a calendar table interactive grid thead 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-th: a calendar table interactive grid column 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-range-picker: a picker for selecting a date range on a calendar
• 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
• character-counter: a counter showing remaining or used characters in a text field
• character: a single character display element
• chat:
  • chat-nav: a navigation container for chat information
  • 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.
• citation: a citation acknowledges the relevance of a work of another to the topic of discussion
• checkbox-group: a group component that manages a collection of checkboxes with shared state
• checkbox-input: a checkbox input for toggling a boolean value
• check-list: an ordered list of check list item components
• check-list-item: one check list item component with a checkbox
• clipboard-copy-button: a button that copies text to the clipboard
• collapsible: a container that can be expanded or collapsed
• 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
• 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
• comment: a comment displays user discussions and user feedback
• combobox: a text input combined with a dropdown list for filtering options
• command: a command palette for searching and executing actions
• contents-nav: a navigation landmark for a table of contents
• contents-list: an ordered list of contents list item components
• contents-list-item: one contents list item component linking to a page section
• contents-link: one contents link in the trail
• context-menu: a menu that appears on right-click or long-press
• context-menu-item: one item in a context menu
• currency-input: a locale-aware currency input with automatic formatting, symbols, separators
• data-filter-form: a form for filtering data by criteria
• data-table:
  • data-table: a data table interactive grid for displaying and sorting tabular data
  • data-table-head: a data table interactive grid thead 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-th: a data table interactive grid column 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
• date-field: a structured field for entering date components
• date-input: an input for entering a date value
• date-range: a display of a start and end date range
• date-time-now-input: an input for entering a date and time and "now" button
• date-time-local-input: an input for entering a date and time without time zone
• 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
• 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
• dialog: a modal or non-modal dialog window
• do-list: a guideline list of encouraged do-list-item components
• do-list-item: an encouraged-practice item in a do-list guideline 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
• drawer: a panel that slides in from the edge of the screen
• dropdown-menu: a menu that opens below a trigger button
• editable-form: a form wrapper for inline editing of content
• editable: an inline-editable text element that toggles between view and edit modes
• email-link: a mailto hyperlink for an email address
• email-input: an input for entering an email address
• emoji-character-picker: a picker for browsing and selecting emoji characters
• emoji: a single emoji character with accessible name
• error-message: an error message associated with a form field
• event: an event component that contains other event-related information
• error-summary: a summary of all validation errors on a form
• expander: a control that expands to reveal more content
• 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:
  • five-face-rating-view: a read-only display of a five-face satisfaction rating
  • 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-star-rating:
  • five-star-rating-view: a read-only display of a five-star 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
• flair: a decorative highlight or emphasis element
• 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
• gantt-table:
  • gantt-table: a Gantt chart table interactive grid for planning schedule visualization
  • gantt-table-thead: a Gantt chart table interactive grid thead for planning schedule visualization
  • gantt-table-tbody: a Gantt chart table interactive grid tbody for planning schedule visualization
  • gantt-table-tfoot: a Gantt chart table interactive grid tfoot for planning schedule visualization
  • gantt-table-th: a Gantt chart table interactive grid column for planning schedule visualization
  • gantt-table-tr: a Gantt chart table interactive grid row for planning schedule visualization
  • gantt-table-td: a Gantt chart table interactive grid data cell for planning schedule visualization
• grail-layout:
  • grail-layout: a responsive web design structure with header, left aside, center main, right aside, footer
  • grail-layout-top-header: grail layout top header full width with header tag
  • grail-layout-left-aside: grail layout left aside sidebar with aside tag
  • grail-layout-center-main: grail layout center main content with main tag
  • grail-layout-right-aside: grail layout right aside sidebar with aside tag
  • grail-layout-bottom-footer: grail layout bottom footer full width with footer tag
• hamburger-menu: a toggle button that opens a mobile navigation menu
• header: a page or section header area
• hero: a large box or image with a title and description
• hidden-input: a hidden input for including data in form submission
• hint: hint text providing guidance for a form field
• hover-card: a card that appears on hover over a trigger element
• icon: a container for displaying an icon
• image-file-input: an input for selecting image files with preview
• image: an image element with alt text
• image-input: a graphical submit button that displays an image
• information-callout: a callout box highlighting informational content
• input: a generic HTML input element
• inset-text: indented text to distinguish it from surrounding content
• kanban-table:
  • kanban-table: a kanban board table interactive grid for organizing items by status
  • kanban-table-head: a kanban board table interactive grid thead for organizing items by status
  • 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-th: a kanban board table interactive grid column 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
• kbd: show keyboard shortcuts and key combinations in a styled inline element
• label: a label associated with a form input
• listbox: a list of selectable options with keyboard navigation
• loading: a loading indicator, such as text, or image, or animation
• measurement:
  • 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 inside a medical-banner, using flexbox horizontal
• medical-banner-box-for-danger: a medical record banner box for danger information
• medical-banner-box-for-advice: a medical record banner box for advice information
• menu: a list of actions or options triggered by a button
• menu-item: one item in a menu
• menu-bar: a horizontal bar of menu triggers
• menu-bar-button: one item in a menu bar
• 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-portrait: a box area that looks like a mobile phone
• 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-shell: a box area that looks like a terminal shell
• 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
• navigation-menu: a site-wide navigation menu with links
• net-promoter-score:
  • net-promoter-score-view: a read-only display of a Net Promoter Score
  • 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
• 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
• pagination:
  • pagination-nav: an ordered list of page navigation links
  • pagination-list: an ordered list of page navigation links
  • pagination-list-item: one page link in a pagination list
  • pagination-link: one pagination link in the trail
• panel: a generic content panel with optional heading
• person: a person component that contains other person-related information
• 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
• place: a place component that contains other place-related information
• pin-input-div: a series of single-digit inputs for entering a PIN or OTP code
• popover: a floating content box anchored to a trigger element
• popup: a temporary overlay that appears above page content
• postal-code:
  • 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
• progress-circle: a circular progress indicator
• progress-spinner: an indeterminate spinning progress indicator
• progress: a horizontal progress bar showing completion
• qr-code: a QR code image generated from text or URL data
• 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:
  • red-amber-green-view: a read-only display of a red/amber/green status
  • 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-orange-yellow-green-blue:
  • red-orange-yellow-green-blue-view: a read-only display of a five-level color 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
• 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
• 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
• search-input: an input for entering a search query
• segment-group: a group of mutually exclusive segment options
• segment-group-item: one selectable segment in a segment group
• select-with-extras: a select dropdown with additional features like search or groups
• select: a dropdown select element for choosing one option
• separator: a horizontal or vertical divider between content sections
• 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
• splitter: a draggable divider for resizing adjacent panels
• submit-input: a button input that submits a form
• super-banner: a super-banner communicates a high-priority state that affects an entire app, experience, process, or system
• summary-list: an ordered list of key-value summary pairs
• summary-list-item: one key-value pair in a summary list
• 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
• table:
  • table: a data table with rows and columns
  • table-head: a table header section
  • table-body: a table body section
  • table-foot: a table footer section
  • table-th: a table column
  • table-row: a table row
  • table-td: a table data cell
• tag-group: a group of tag elements
• tag: a keyword label for categorizing content
• 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-input: a single-line text input field
• text-input-with-search: a single-line text input field with search capability
• text-area-input: a multi-line text input area
• text-area-input-with-character-counter: a multi-line text area with character counter
• 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
• 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
• tile: a grouping container that presents related content in a structured format, often as a single clickable area
• 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-group: a group of toggle buttons for selecting options
• toggle-button: a button that toggles between pressed and unpressed states
• 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
• tree-menu: a hierarchical tree menu with expandable branches
• tree-nav: a hierarchical navigation with expandable branches
• tree-list: a hierarchical list with nested expandable items
• tree-list-item: one item in a tree navigation list
• tree-link: one tree link in the trail
• united-kingdom:
  • 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-states:
  • 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
• url-input: an input for entering a URL
• warning-callout: a callout box highlighting a warning message
• week-input: an input for selecting a week and year

Component name patterns

• *Bar *BarButton: MenuBar, TabBar, TaskBar, ToolBar
• *Group *GroupItem: SegmentGroup
• *List *ListItem: CheckList, ContentsList, DoList, DontList, PaginationList, SummaryList
• *Nav *List *ListItem: AccordionNav, BreadcrumbNav, ContentsNav, PaginationNav, TreeNav
• *Menu *MenuItem: ContextMenu, Menu, TreeMenu
• *Picker *PickerButton: ColorPicker, FiveFaceRatingPicker, FiveStarRatingPicker, NetPromoterScorePicker, RedAmberGreenPicker, RedOrangeYellowGreenBluePicker
• *Table *TableHead *TableBody *TableFoot *TableTD *TableRow *TableTD: Table, CalendarTable, DataTable, GanttTable, KanbanTable
• *Input *Link: TelInput/TelLink, EmailInput/EmailLink
• Tour TourList TourListItem

Component patterns for name suffix and HTML tag

| Suffix | HTML tag | | ---------- | ------------ | | article | <article> | | aside | <aside> | | button | <button> | | dialog | <dialog> | | div | <div> | | fieldset | <fieldset> | | figure | <figure> | | footer | <footer> | | header | <header> | | input | <input> | | kbd | <kbd> | | list | <ol> | | list-item | <li> | | main | <main> | | meter | <meter> | | nav | <nav> | | option | <option> | | picker | <div> | | progress | <progress> | | table | <table> | | table-head | <thead> | | table-body | <tbody> | | table-foot | <tfoot> | | table-th | <th> | | table-row | <tr> | | table-td | <td> | | select | <select> | | span | <span> |

Architecture

• Plain HTML with vanilla JavaScript for interactivity
• Headless design: no CSS, no styles — consumers provide all styling
• Accessible: WCAG 2.2 AAA, ARIA attributes, keyboard navigation
• Internationalization: no hardcoded user-facing strings
• Zero dependencies: works in any browser without build tools

Usage Examples

Button

<button class="button" type="button">Click me</button>

Alert

<div class="alert" role="alert" data-type="info">
  <strong>Note:</strong> This is an informational alert.
</div>

Breadcrumb Navigation

<nav class="breadcrumb-nav" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-list-item"><a href="/">Home</a></li>
    <li class="breadcrumb-list-item"><a href="/products">Products</a></li>
    <li class="breadcrumb-list-item" aria-current="page">Widget Pro</li>
  </ol>
</nav>

Data Table

<table class="data-table" aria-label="Users">
  <thead class="data-table-head">
    <tr class="data-table-row">
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody class="data-table-body">
    <tr class="data-table-row">
      <td class="data-table-td">Jane Doe</td>
      <td class="data-table-td">[email protected]</td>
      <td class="data-table-td">Admin</td>
    </tr>
  </tbody>
</table>

Dialog

<dialog class="dialog" aria-label="Confirm deletion">
  <p>Are you sure you want to delete this item?</p>
  <button class="button" type="button">Cancel</button>
  <button class="button" type="button">Delete</button>
</dialog>

<script>
  const dialog = document.querySelector(".dialog");
  dialog.showModal();
</script>

Form with Fields

<form class="form" aria-label="Contact">
  <div class="field">
    <label class="label" for="name">Name</label>
    <input class="text-input" type="text" id="name" required />
    <span class="error-message" role="alert"></span>
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" required />
    <span class="error-message" role="alert"></span>
  </div>
  <button class="submit-input" type="submit">Send</button>
</form>

Grail Layout

<div class="grail-layout">
  <header class="grail-layout-top-header">Header</header>
  <aside class="grail-layout-left-aside">Left sidebar</aside>
  <main class="grail-layout-center-main">Main content</main>
  <aside class="grail-layout-right-aside">Right sidebar</aside>
  <footer class="grail-layout-bottom-footer">Footer</footer>
</div>

Styling Guide

Since components are headless, you provide all styling. Every component renders a semantic CSS class on its root element:

With Plain CSS

.button {
  padding: 8px 16px;
  border-radius: 4px;
}
.alert {
  padding: 12px;
  border-left: 4px solid;
}
.alert[data-type="error"] {
  border-color: red;
  background: #fff0f0;
}
.alert[data-type="success"] {
  border-color: green;
  background: #f0fff0;
}
.dialog {
  max-width: 480px;
  border-radius: 8px;
}

With Tailwind CSS

<button
  class="button bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
>
  Save
</button>

Accessibility

All components follow WCAG 2.2 AAA guidelines:

• Semantic HTML: Proper element usage (<button>, <nav>, <dialog>, etc.)
• ARIA attributes: Roles, labels, states, and properties
• Keyboard navigation: Full keyboard support for all interactive components
• Screen readers: Proper announcements via aria-live, role="alert", etc.
• Focus management: Logical focus order and visible focus indicators

Internationalization

No strings are hardcoded in any component. All user-facing text comes through HTML content, attributes, or JavaScript configuration. Labels, placeholders, and error messages are all configurable by the consumer.

Related Projects

• Lily Design System — Parent project
• Svelte Headless — Svelte equivalent
• React Headless — React equivalent
• Vue Headless — Vue equivalent
• Blazor Headless — Blazor equivalent
• Angular Headless — Angular 20 equivalent

License

MIT or Apache-2.0 or GPL-2.0 or GPL-3.0, or contact us for more options.

Contact

Joel Parker Henderson ([email protected])

Lily™ and Lily Design System™ are trademarks.