# WovenUI Components

> WovenUI Components (`@wovenui/components` 1.1.0) is a CSS-first UI kit built on the design tokens of WovenUI core (`@wovenui/core`). Components are plain HTML with class names and modifiers, themed through `--wu-*` custom properties, with light and dark themes and RTL support. A small optional script covers the interactive parts.

Install the kit after WovenUI core, then load it as one stylesheet or per component. See [Get started](https://wovenui.com/components/docs/install/).

The WovenUI Components guide for AI assistants (markup, modifiers, parts and states of every component) is in [components/llms-full.txt](https://wovenui.com/components/llms-full.txt).
The WovenUI core guide (syntax rules, every mixin, tokens, configuration) is in [llms-full.txt](https://wovenui.com/llms-full.txt), and the core index is in [llms.txt](https://wovenui.com/llms.txt).

## Getting started

- [Get started](https://wovenui.com/components/docs/): Install the UI kit after WovenUI core, load it as one stylesheet or per component, and add a first component. See which parts need the optional script.
- [Install and download](https://wovenui.com/components/docs/install/): Install the HTML and CSS UI kit with npm, pnpm or yarn, load it from a CDN, or download the CSS and JS files from wovenui.com. Pick what fits.
- [JavaScript](https://wovenui.com/components/docs/javascript/): The optional kit script starts tabs, toasts, autocomplete and data table sorting. Load it as a drop-in script or an ES module; the other components need none.
- [First-class RTL support](https://wovenui.com/components/docs/rtl/): First-class RTL support for Arabic, Hebrew, Persian and Urdu from one stylesheet. Logical properties, dir="rtl", wu-mirror and live demos in a CSS framework.
- [Migrate from Bootstrap](https://wovenui.com/components/docs/migrate-from-bootstrap/): Migrate from Bootstrap to WovenUI, a Bootstrap alternative built on Sass. Map btn-primary to wu-btn brand, modal to a native dialog and dropdown to a popover.
- [Migrate from Bulma](https://wovenui.com/components/docs/migrate-from-bulma/): Migrate from Bulma to WovenUI, a Sass-based Bulma alternative. Map button is-primary to wu-btn brand and columns to grid, with native dialogs and popovers.
- [Migrate from Foundation](https://wovenui.com/components/docs/migrate-from-foundation/): Migrate from Foundation to WovenUI, a Foundation alternative with no jQuery. Map grid-x and cell to grid and col-span, button primary to wu-btn brand.
- [Migrate from Pico CSS](https://wovenui.com/components/docs/migrate-from-pico/): Migrate from Pico CSS to WovenUI, a Pico alternative with more components. See which plain HTML core styles and which kit classes add cards, dialogs and tables.
- [Migrate from Tailwind](https://wovenui.com/components/docs/migrate-from-tailwind/): Migrate from Tailwind CSS to WovenUI, a Tailwind alternative in Sass. Map justify-between to between and daisyUI or Flowbite style classes to the wu- kit.
- [Migrate from UnoCSS](https://wovenui.com/components/docs/migrate-from-unocss/): Migrate from UnoCSS to WovenUI, a UnoCSS alternative without scanning. Map utilities, @apply and shortcuts to core and the wu- kit components.

## Components

- [Button](https://wovenui.com/components/docs/button/): CSS buttons in brand, danger, quiet, link and subtle variants, icon-only squares, small and large sizes, aria-busy loading and an optional spring press.
- [Button group](https://wovenui.com/components/docs/btn-group/): A CSS button group that joins buttons into one control, horizontal or vertical, with a pressed toggle state, split buttons and an optional press effect.
- [Avatar](https://wovenui.com/components/docs/avatar/): CSS avatars with initials, an image or an svg in a circle or square, in three sizes and seven hues, plus a status marker whose shape changes per state.
- [Avatar group](https://wovenui.com/components/docs/avatar-group/): A CSS avatar group that stacks overlapping avatars and shows an overflow count, with an optional fan-out animation, for teams, assignees and shared files.
- [Badge](https://wovenui.com/components/docs/badge/): CSS badges as small pills for counts and statuses, in subtle and solid role styles, with tabular numbers and a corner position on an icon or avatar.
- [Description list](https://wovenui.com/components/docs/desc-list/): Style a dl of terms and descriptions in CSS, stacked, in two columns, as a bordered table or with several pairs per row, for orders, profiles and settings.
- [Info row](https://wovenui.com/components/docs/info-row/): A CSS info row that shows one label and value pair per row, with lines between adjacent rows, for order details, invoices and account summaries.
- [List](https://wovenui.com/components/docs/list/): A CSS list of rows with leading and trailing content, a title and text, in divided or compact styles, for members, files and notifications.
- [Stat](https://wovenui.com/components/docs/stat/): A CSS stat that shows a label, a large value and a change line with a trend marker, in three sizes, for dashboards and report summaries.
- [Table](https://wovenui.com/components/docs/table/): A CSS table with sticky header and columns, selection, expandable rows, truncated cells, a summary row and striped styles. Selection and expand use the script.
- [Tag](https://wovenui.com/components/docs/tag/): A CSS tag for categories and filters, in seven hues, with link, button and checkable filter chip tags and a remove button, for filter bars and records.
- [Timeline](https://wovenui.com/components/docs/timeline/): A CSS timeline built on an ordered list of events, with markers, a rail, role colors, a progress mode and an optional drawing animation. No JavaScript required.
- [Alert](https://wovenui.com/components/docs/alert/): CSS alert boxes for every role, with a title, actions and a dismiss button. The marker shape repeats the meaning, so the message never relies on color alone.
- [Circular progress](https://wovenui.com/components/docs/progress-circle/): A CSS circular progress ring set by one variable, in role colors and three sizes, with an optional transition between values, for quotas and goals.
- [Empty state](https://wovenui.com/components/docs/empty-state/): A centered CSS empty state with a title, text and actions for empty lists, plus success, warning, danger and info results that carry a shape marker.
- [Progress bar](https://wovenui.com/components/docs/progress/): A CSS progress bar on the native progress element, determinate or indeterminate, in role colors and three heights, with a label row. No JavaScript required.
- [Skeleton loader](https://wovenui.com/components/docs/skeleton/): A CSS skeleton loader with placeholder blocks, text lines and circles shown while content loads, plus an opt-in shimmer that follows the reading direction.
- [Spinner](https://wovenui.com/components/docs/spinner/): A CSS loading spinner ring in the current text color, in three sizes with a size variable, for buttons and pending content, with a status pattern for screen readers.
- [Status dot](https://wovenui.com/components/docs/dot/): A small CSS status dot in role colors, with a size variable and an optional live ring animation, for online, busy or error indicators next to a label.
- [Card](https://wovenui.com/components/docs/card/): A CSS card as a raised surface with header, body and footer parts, and a stretched link that makes the whole card clickable while its buttons still work.
- [Code block](https://wovenui.com/components/docs/code-block/): Style a pre and code block in CSS with scroll shadows, optional line numbers and variables for the background and font, for docs, changelogs and snippets.
- [Divider](https://wovenui.com/components/docs/divider/): A CSS divider that draws a horizontal or vertical separator line, dashed or with a text label in the middle, such as an "or" between sign-in options.
- [Heading](https://wovenui.com/components/docs/title/): A CSS class that sets a heading size on any element in three sizes, independent of the heading level, so document outline and looks stay separate.
- [Panel](https://wovenui.com/components/docs/panel/): A flat, bordered CSS panel for grouped settings or data, with header, body and footer parts, lighter than a card for dense admin screens.
- [Text](https://wovenui.com/components/docs/text/): A CSS text class that sets body text on any element, in three sizes and a muted color, with spacing between paragraphs for long-form copy.
- [Breadcrumb](https://wovenui.com/components/docs/breadcrumb/): A CSS breadcrumb that shows the path to the current page, with chevron or slash separators drawn in CSS and mirrored in right to left, on a native nav and list.
- [Page header](https://wovenui.com/components/docs/page-header/): A CSS page header with an optional breadcrumb, a title, a description and actions that wrap below the title on narrow screens.
- [Pagination](https://wovenui.com/components/docs/pagination/): CSS pagination built from button links, with a current page, drawn previous and next arrows, a total count, a page size picker and three sizes.
- [Sidebar](https://wovenui.com/components/docs/sidebar/): A CSS sidebar navigation column with sections, links, icons, collapsible groups, a pinned variant and a collapsed icon rail with label tooltips.
- [Toolbar](https://wovenui.com/components/docs/toolbar/): A CSS toolbar as a wrapping row of controls, with groups, separators, an end group and a boxed variant, for actions above tables and editors.
- [Top bar](https://wovenui.com/components/docs/topbar/): A CSS top bar for an application header, with a brand, a scrolling nav, an end group, a pinned variant and a scroll progress line. No JavaScript required.
- [Checkbox](https://wovenui.com/components/docs/checkbox/): A CSS checkbox on the native input, with a drawn check mark, an indeterminate dash, two sizes, plus invalid and disabled states. Indeterminate is set by script.
- [Field message](https://wovenui.com/components/docs/field-message/): Hint and status text under a form control, with error, success and info markers drawn in CSS, so a state never relies on color alone.
- [Form actions](https://wovenui.com/components/docs/form-actions/): The CSS button row at the end of a form, aligned start, end or center, with an end group and an optional divider line above the buttons.
- [Form field](https://wovenui.com/components/docs/field/): A CSS form field that wraps a label, a control and its messages, with a required marker, an error on invalid input, and a floating label. No script needed.
- [Form field group](https://wovenui.com/components/docs/field-group/): A CSS form field group built on a fieldset and legend that stacks fields or sets them side by side, and sets one control size for the whole form.
- [Input group](https://wovenui.com/components/docs/input-group/): A CSS input group that joins text addons, an input and buttons into one row with a shared border and radius, for URLs, prices and search boxes.
- [Radio button](https://wovenui.com/components/docs/radio/): A CSS radio button on the native input, with a drawn dot, small and large sizes, and invalid and disabled states. Arrow keys move the choice natively.
- [Segmented control](https://wovenui.com/components/docs/segmented/): A CSS segmented control, or segmented button, as a radio group shown as connected segments, in three sizes, with an optional sliding thumb. No JavaScript.
- [Select](https://wovenui.com/components/docs/select/): A CSS select on the native select element, with the input look, a drawn arrow, two sizes and list boxes. Includes a styled picker.
- [Text input](https://wovenui.com/components/docs/input/): A CSS text input in three sizes with disabled, read-only and invalid states, plus prefix and suffix inside the field border and a clear button.
- [Textarea](https://wovenui.com/components/docs/textarea/): A CSS multi-line textarea with a bounded height that grows with the content, matching the text input look.
- [Toggle switch](https://wovenui.com/components/docs/toggle/): A CSS toggle switch built on a native checkbox with role switch, in three sizes, with invalid and disabled states and an optional spring thumb. No JavaScript.

## Overlays and disclosure

- [Accordion](https://wovenui.com/components/docs/accordion/): A CSS accordion built on native details elements, with no JavaScript. Chevron marker, exclusive or independent sections and an optional height animation.
- [Confirmation dialog](https://wovenui.com/components/docs/confirm-modal/): A compact confirmation dialog on the native dialog element, with a title, a message, two actions and a danger variant. Opens and closes without JavaScript.
- [Drawer](https://wovenui.com/components/docs/drawer/): A side drawer on the native dialog element, docked to the inline end, inline start or bottom. Opens with invoker commands, no JavaScript. Optional slide.
- [Dropdown menu](https://wovenui.com/components/docs/dropdown/): A dropdown menu of links and buttons in a native popover, anchored under its trigger. Opens with no JavaScript. Danger and disabled items.
- [Modal](https://wovenui.com/components/docs/modal/): A CSS modal on the native dialog element. Opens and closes with invoker commands, no JavaScript. Header, close button, scrolling body, footer and three widths.
- [Popover](https://wovenui.com/components/docs/popover/): A CSS popover on the native popover attribute, with a title, placed under its trigger and flipped to stay in view where anchor positioning exists. No JavaScript.
- [Tooltip](https://wovenui.com/components/docs/tooltip/): CSS-only tooltips from core's data-tooltip attribute, with eight positions, three widths and variables. No JavaScript needed, and they work with the kit loaded.

## Interactive components

- [Autocomplete](https://wovenui.com/components/docs/autocomplete/): A combobox input that filters a list of options as you type. Styled with CSS and started by the kit script. Disabled options, empty message and optional fade.
- [Data table](https://wovenui.com/components/docs/data-table/): A sortable data table. The kit script adds click-to-sort by text or number, with an optional row animation. The styling is CSS, the sorting needs JavaScript.
- [Tabs](https://wovenui.com/components/docs/tabs/): Accessible tabs following the WAI-ARIA tabs pattern, styled with CSS and started by the kit script. Card, boxed and vertical styles, plus disabled tabs.
- [Toast notification](https://wovenui.com/components/docs/toast/): Toast notifications in a polite live region, shown with toast() from the kit script. Role colors, four corner placements and an optional stacking animation.

## Patterns

- [Patterns](https://wovenui.com/components/patterns/): Ready-made blocks and templates in WovenUI core utility classes, with HTML to copy that needs only the prebuilt core stylesheet.
- [Card pattern](https://wovenui.com/components/patterns/card/): A content card with a title, a status badge, a short text and two actions, built with WovenUI classes and with apply().
- [Dark mode toggle pattern](https://wovenui.com/components/patterns/dark-mode-toggle/): A dark mode toggle button that sets data-theme on the html element, stores the choice and follows prefers-color-scheme until one is made.
- [Form field pattern](https://wovenui.com/components/patterns/form-field/): Labeled form fields with a hint, a select and an error message, styled by the WovenUI base layer and theme tokens.
- [Navbar pattern](https://wovenui.com/components/patterns/navbar/): A responsive top navigation bar with a wordmark, page links and an account link, built with WovenUI classes and with apply().
- [Dashboard layout template](https://wovenui.com/components/patterns/dashboard-layout/): A responsive dashboard layout with a side navigation, a header, three stat tiles and a recent orders list, built with WovenUI grid and flex.
- [Mail client template](https://wovenui.com/components/patterns/mail-client/): A mail client template with a tool rail, folders, labels, an inbox and a reading pane, in WovenUI utility classes. Copy the HTML; no JavaScript needed.
- [Pricing table template](https://wovenui.com/components/patterns/pricing-table/): A responsive three-plan pricing table with a highlighted plan, feature lists and calls to action, built with WovenUI classes and with apply().
- [Team settings template](https://wovenui.com/components/patterns/team-settings/): A team settings template with tabs, an invite form, a warning and a members list, in WovenUI utility classes. Follows light, dark and right to left.