# SilicaUI > The CSS-first Tailwind component library — Base UI behavior, OKLCH design tokens, and one color × variant × size × shape vocabulary across React, framework-neutral HTML, and vanilla JS. SilicaUI is an open-source component library built on Tailwind CSS v4 and Base UI. Every component is styled with real CSS classes (not runtime CSS-in-JS) and every color is an OKLCH design token, so a single named color instantly re-tints every variant with no rebuild and no safelist. Components ship in three synchronized layers — React (silicaui-react), a framework-neutral node-tree + HTML projection (silicaui-html), and a zero-dependency vanilla behavior runtime (silicaui-behaviors) — so the same accessible primitives work in React apps, static sites, and server-rendered HTML alike. ## Documentation - [Getting started](https://silicaui.com/docs/getting-started/): install SilicaUI, register the Tailwind plugin, and bring your own OKLCH tokens. - [Components & documentation](https://silicaui.com/docs/): every component with a live, interactive demo. - [About](https://silicaui.com/about/): why SilicaUI exists and how it is built. ## Components - [Accordion](https://silicaui.com/docs/components/accordion/): Accordion — a CSS-first, fully-tokened Accordion component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Alert](https://silicaui.com/docs/components/alert/): Alert — a CSS-first, fully-tokened Alert component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Alert Dialog](https://silicaui.com/docs/components/alert-dialog/): Alert Dialog — a CSS-first, fully-tokened Alert Dialog component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Animations](https://silicaui.com/docs/components/animations/): Animations — a CSS-first, fully-tokened Animations component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [App Shell](https://silicaui.com/docs/components/app-shell/): App Shell — a CSS-first, fully-tokened App Shell component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Avatar](https://silicaui.com/docs/components/avatar/): Avatar — a CSS-first, fully-tokened Avatar component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Badge](https://silicaui.com/docs/components/badge/): A status badge with color × variant × size props for marking state on a row, card, or record — auto-derives a legible foreground from any token. - [Breadcrumb](https://silicaui.com/docs/components/breadcrumb/): Breadcrumb — a CSS-first, fully-tokened Breadcrumb component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [Button](https://silicaui.com/docs/components/button/): An accessible, fully-tokened button with color, variant (solid/soft/outline/ghost/link), size, and shape props — the same class vocabulary in React and stati… - [Calendar](https://silicaui.com/docs/components/calendar/): A themeable date calendar with keyboard navigation, range selection, and locale support — no date library lock-in, OKLCH-tokened surfaces. - [Card](https://silicaui.com/docs/components/card/): A composable surface card that reads the ambient theme's tokens — drop it inside a `data-theme` island and it re-skins with no per-theme CSS. - [Carousel](https://silicaui.com/docs/components/carousel/): Carousel — a CSS-first, fully-tokened Carousel component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Chart](https://silicaui.com/docs/components/chart/): Chart — a CSS-first, fully-tokened Chart component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Chat](https://silicaui.com/docs/components/chat/): Chat — a CSS-first, fully-tokened Chat component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Chat Suite](https://silicaui.com/docs/components/chat-suite/): Chat Suite — a CSS-first, fully-tokened Chat Suite component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [Checkbox](https://silicaui.com/docs/components/checkbox/): Checkbox — a CSS-first, fully-tokened Checkbox component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Checkbox Group](https://silicaui.com/docs/components/checkbox-group/): Checkbox Group — a CSS-first, fully-tokened Checkbox Group component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size… - [Collapse](https://silicaui.com/docs/components/collapse/): Collapse — a CSS-first, fully-tokened Collapse component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Collapsible](https://silicaui.com/docs/components/collapsible/): Collapsible — a CSS-first, fully-tokened Collapsible component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Color Picker](https://silicaui.com/docs/components/color-picker/): An OKLCH-native color picker: pick in a perceptually-uniform color space and get a token that re-tints an entire component set, in vanilla JS with no React r… - [Combobox](https://silicaui.com/docs/components/combobox/): A keyboard-accessible autocomplete combobox built on Base UI: type-ahead filtering, async options, and full ARIA, styled entirely with CSS classes. - [Command Palette](https://silicaui.com/docs/components/command-palette/): A ⌘K command palette with fuzzy search and keyboard navigation, reusing the modal behavior primitive — zero extra runtime. - [Countdown](https://silicaui.com/docs/components/countdown/): Countdown — a CSS-first, fully-tokened Countdown component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Data Table](https://silicaui.com/docs/components/data-table/): A sortable, filterable data table powered by TanStack Table, wrapped in SilicaUI's tokened styling — an opt-in package so the core stays lean. - [Date Input](https://silicaui.com/docs/components/date-input/): Date Input — a CSS-first, fully-tokened Date Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [Date Time Input](https://silicaui.com/docs/components/date-time-input/): Date Time Input — a CSS-first, fully-tokened Date Time Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × siz… - [Dialog](https://silicaui.com/docs/components/dialog/): An accessible modal dialog with focus trapping, scroll locking, and enter/exit animation, driven by Base UI behavior in React and the vanilla behavior runtim… - [Diff](https://silicaui.com/docs/components/diff/): Diff — a CSS-first, fully-tokened Diff component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Divider](https://silicaui.com/docs/components/divider/): Divider — a CSS-first, fully-tokened Divider component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Dock](https://silicaui.com/docs/components/dock/): Dock — a CSS-first, fully-tokened Dock component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Drawer](https://silicaui.com/docs/components/drawer/): Drawer — a CSS-first, fully-tokened Drawer component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Dropdown](https://silicaui.com/docs/components/dropdown/): Dropdown — a CSS-first, fully-tokened Dropdown component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Dropzone](https://silicaui.com/docs/components/dropzone/): A drag-and-drop file dropzone with keyboard and click fallbacks, accessible status messaging, and tokened states. - [Empty State](https://silicaui.com/docs/components/empty-state/): Empty State — a CSS-first, fully-tokened Empty State component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Field](https://silicaui.com/docs/components/field/): Field — a CSS-first, fully-tokened Field component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Fieldset](https://silicaui.com/docs/components/fieldset/): Fieldset — a CSS-first, fully-tokened Fieldset component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [File Input](https://silicaui.com/docs/components/file-input/): File Input — a CSS-first, fully-tokened File Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [File Upload](https://silicaui.com/docs/components/file-upload/): File Upload — a CSS-first, fully-tokened File Upload component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Filter](https://silicaui.com/docs/components/filter/): Filter — a CSS-first, fully-tokened Filter component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Footer](https://silicaui.com/docs/components/footer/): Footer — a CSS-first, fully-tokened Footer component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Form](https://silicaui.com/docs/components/form/): Form — a CSS-first, fully-tokened Form component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Hero](https://silicaui.com/docs/components/hero/): Hero — a CSS-first, fully-tokened Hero component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Hooks](https://silicaui.com/docs/components/hooks/): Hooks — a CSS-first, fully-tokened Hooks component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Indicator](https://silicaui.com/docs/components/indicator/): Indicator — a CSS-first, fully-tokened Indicator component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Input](https://silicaui.com/docs/components/input/): A tokened text input with error/warning/success field status (border + icon + message) layered over the base control, never a bespoke variant. - [Input Group](https://silicaui.com/docs/components/input-group/): Input Group — a CSS-first, fully-tokened Input Group component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Join](https://silicaui.com/docs/components/join/): Join — a CSS-first, fully-tokened Join component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Kbd](https://silicaui.com/docs/components/kbd/): Kbd — a CSS-first, fully-tokened Kbd component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and ava… - [Label](https://silicaui.com/docs/components/label/): Label — a CSS-first, fully-tokened Label component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Lightbox](https://silicaui.com/docs/components/lightbox/): Lightbox — a CSS-first, fully-tokened Lightbox component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Link](https://silicaui.com/docs/components/link/): Link — a CSS-first, fully-tokened Link component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [List](https://silicaui.com/docs/components/list/): List — a CSS-first, fully-tokened List component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Loading](https://silicaui.com/docs/components/loading/): Loading — a CSS-first, fully-tokened Loading component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Marquee](https://silicaui.com/docs/components/marquee/): Marquee — a CSS-first, fully-tokened Marquee component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Mask](https://silicaui.com/docs/components/mask/): Mask — a CSS-first, fully-tokened Mask component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Menu](https://silicaui.com/docs/components/menu/): Menu — a CSS-first, fully-tokened Menu component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Menubar](https://silicaui.com/docs/components/menubar/): Menubar — a CSS-first, fully-tokened Menubar component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Metadata List](https://silicaui.com/docs/components/metadata-list/): Metadata List — a CSS-first, fully-tokened Metadata List component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size ×… - [Meter](https://silicaui.com/docs/components/meter/): Meter — a CSS-first, fully-tokened Meter component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Mockup](https://silicaui.com/docs/components/mockup/): Mockup — a CSS-first, fully-tokened Mockup component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Multi Select](https://silicaui.com/docs/components/multi-select/): A tag-style multi-select with keyboard chips, filtering, and accessible removal — one component, tokened across themes. - [Navbar](https://silicaui.com/docs/components/navbar/): Navbar — a CSS-first, fully-tokened Navbar component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Navigation Menu](https://silicaui.com/docs/components/navigation-menu/): Navigation Menu — a CSS-first, fully-tokened Navigation Menu component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × siz… - [Number Field](https://silicaui.com/docs/components/number-field/): Number Field — a CSS-first, fully-tokened Number Field component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Outline](https://silicaui.com/docs/components/outline/): Outline — a CSS-first, fully-tokened Outline component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Overflow List](https://silicaui.com/docs/components/overflow-list/): Overflow List — a CSS-first, fully-tokened Overflow List component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size ×… - [Overlay](https://silicaui.com/docs/components/overlay/): Overlay — a CSS-first, fully-tokened Overlay component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Pagination](https://silicaui.com/docs/components/pagination/): Pagination — a CSS-first, fully-tokened Pagination component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [Password Input](https://silicaui.com/docs/components/password-input/): Password Input — a CSS-first, fully-tokened Password Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size… - [Phone Input](https://silicaui.com/docs/components/phone-input/): Phone Input — a CSS-first, fully-tokened Phone Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Pin Input](https://silicaui.com/docs/components/pin-input/): Pin Input — a CSS-first, fully-tokened Pin Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Popover](https://silicaui.com/docs/components/popover/): Popover — a CSS-first, fully-tokened Popover component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Power Search](https://silicaui.com/docs/components/power-search/): Power Search — a CSS-first, fully-tokened Power Search component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Preview Card](https://silicaui.com/docs/components/preview-card/): Preview Card — a CSS-first, fully-tokened Preview Card component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Progress](https://silicaui.com/docs/components/progress/): Progress — a CSS-first, fully-tokened Progress component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Prose](https://silicaui.com/docs/components/prose/): Prose — a CSS-first, fully-tokened Prose component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Radial Progress](https://silicaui.com/docs/components/radial-progress/): Radial Progress — a CSS-first, fully-tokened Radial Progress component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × siz… - [Radio](https://silicaui.com/docs/components/radio/): Radio — a CSS-first, fully-tokened Radio component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Radio Group](https://silicaui.com/docs/components/radio-group/): Radio Group — a CSS-first, fully-tokened Radio Group component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Range](https://silicaui.com/docs/components/range/): Range — a CSS-first, fully-tokened Range component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Rating](https://silicaui.com/docs/components/rating/): Rating — a CSS-first, fully-tokened Rating component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Resizable Panels](https://silicaui.com/docs/components/resizable-panels/): Resizable Panels — a CSS-first, fully-tokened Resizable Panels component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × s… - [Rich Text Editor](https://silicaui.com/docs/components/rich-text-editor/): Rich Text Editor — a CSS-first, fully-tokened Rich Text Editor component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × s… - [Scroll Area](https://silicaui.com/docs/components/scroll-area/): Scroll Area — a CSS-first, fully-tokened Scroll Area component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shap… - [Scroll Strip](https://silicaui.com/docs/components/scroll-strip/): Scroll Strip — a CSS-first, fully-tokened Scroll Strip component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Search Input](https://silicaui.com/docs/components/search-input/): Search Input — a CSS-first, fully-tokened Search Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Select (Advanced)](https://silicaui.com/docs/components/select-menu/): Select (Advanced) — a CSS-first, fully-tokened Select (Advanced) component from SilicaUI. Accessible by default via Base UI, themeable with color × variant ×… - [Select (Native)](https://silicaui.com/docs/components/select/): A styleable select built on Base UI's listbox — full keyboard support and typeahead, tokened to match every other control. - [Selection List](https://silicaui.com/docs/components/selection-list/): Selection List — a CSS-first, fully-tokened Selection List component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size… - [Sidebar](https://silicaui.com/docs/components/sidebar/): Sidebar — a CSS-first, fully-tokened Sidebar component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Skeleton](https://silicaui.com/docs/components/skeleton/): Skeleton — a CSS-first, fully-tokened Skeleton component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Slider](https://silicaui.com/docs/components/slider/): Slider — a CSS-first, fully-tokened Slider component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Sortable List](https://silicaui.com/docs/components/sortable-list/): Sortable List — a CSS-first, fully-tokened Sortable List component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size ×… - [Stack](https://silicaui.com/docs/components/stack/): Stack — a CSS-first, fully-tokened Stack component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Stat](https://silicaui.com/docs/components/stat/): Stat — a CSS-first, fully-tokened Stat component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Status](https://silicaui.com/docs/components/status/): Status — a CSS-first, fully-tokened Status component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Steps](https://silicaui.com/docs/components/steps/): Steps — a CSS-first, fully-tokened Steps component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Swap](https://silicaui.com/docs/components/swap/): Swap — a CSS-first, fully-tokened Swap component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Switch](https://silicaui.com/docs/components/switch/): Switch — a CSS-first, fully-tokened Switch component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Table](https://silicaui.com/docs/components/table/): Table — a CSS-first, fully-tokened Table component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and… - [Tabs](https://silicaui.com/docs/components/tabs/): Tabs — a CSS-first, fully-tokened Tabs component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and a… - [Tag Input](https://silicaui.com/docs/components/tag-input/): Tag Input — a CSS-first, fully-tokened Tag Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Textarea](https://silicaui.com/docs/components/textarea/): Textarea — a CSS-first, fully-tokened Textarea component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Time Input](https://silicaui.com/docs/components/time-input/): Time Input — a CSS-first, fully-tokened Time Input component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [Timeline](https://silicaui.com/docs/components/timeline/): Timeline — a CSS-first, fully-tokened Timeline component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… - [Timestamp](https://silicaui.com/docs/components/timestamp/): Timestamp — a CSS-first, fully-tokened Timestamp component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Toast](https://silicaui.com/docs/components/toast/): An imperative toast/notification system with an accessible live region, auto-dismiss, and tone-by-status coloring. - [Toggle](https://silicaui.com/docs/components/toggle/): Toggle — a CSS-first, fully-tokened Toggle component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Toggle Group](https://silicaui.com/docs/components/toggle-group/): Toggle Group — a CSS-first, fully-tokened Toggle Group component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × sh… - [Toolbar](https://silicaui.com/docs/components/toolbar/): Toolbar — a CSS-first, fully-tokened Toolbar component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props,… - [Tooltip](https://silicaui.com/docs/components/tooltip/): An accessible tooltip on Base UI's positioning engine, with hover/focus triggers and reduced-motion-aware animation. - [Tree View](https://silicaui.com/docs/components/tree-view/): Tree View — a CSS-first, fully-tokened Tree View component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Typography](https://silicaui.com/docs/components/typography/): Typography — a CSS-first, fully-tokened Typography component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape… - [Validator](https://silicaui.com/docs/components/validator/): Validator — a CSS-first, fully-tokened Validator component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape pr… - [Wizard](https://silicaui.com/docs/components/wizard/): Wizard — a CSS-first, fully-tokened Wizard component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, a… - [Wordmark](https://silicaui.com/docs/components/wordmark/): Wordmark — a CSS-first, fully-tokened Wordmark component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape prop… ## Source & packages - [GitHub repository](https://github.com/silicaui/silicaui) - [npm package @wizeworks/silicaui](https://www.npmjs.com/package/@wizeworks/silicaui)