# SilicaUI — full reference > 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. ## What makes it different - CSS-first: components are styled with real, static CSS classes — no runtime CSS-in-JS, no per-render style injection. - OKLCH design tokens: every color class is a pure CSS-variable setter, so declaring one named color re-tints every variant and utility with no rebuild and no safelist. - Three synchronized layers: silicaui-react (React), silicaui-html (framework-neutral node tree + HTML projection), and silicaui-behaviors (zero-dependency vanilla runtime that hydrates the same markup). - Accessible by default: interactive components wrap Base UI, so focus management, keyboard support, and ARIA come built in. - Theme islands: nest data-theme on any wrapper and everything inside resolves against that theme's tokens, with no per-theme CSS. ## Components ### Accordion https://silicaui.com/docs/components/accordion/ Collapsible sections (Base UI behavior, animated height). ### Alert https://silicaui.com/docs/components/alert/ A feedback surface, from an inline notice to a page banner. Compose it from parts, like Card. ### Alert Dialog https://silicaui.com/docs/components/alert-dialog/ A confirmation modal from Base UI. ### Animations https://silicaui.com/docs/components/animations/ Assignable element animations — presets an end user (via a site builder) can apply to ANY element, generated from one preset table so the three trigger class families always stay in sync: .sui-animate-{preset} — ON LOAD: a @keyframes animation that plays automatically on paint. ### App Shell https://silicaui.com/docs/components/app-shell/ The outer page skeleton (one CSS Grid, named areas). ### Avatar https://silicaui.com/docs/components/avatar/ A photo, or an initials/icon fallback on a colored chip. ### 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/ A navigation trail. Pass
  • items as children; the chevron separators are drawn by CSS, so no separator markup is needed. ### 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 static HTML. ### 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/ A scroll-snap strip driven by real prev/next controls and dot indicators (with optional loop + autoplay), not just a scrollable list. ### Chart https://silicaui.com/docs/components/chart/ A thin, fully-featured wrapper over Apache ECharts that auto-themes to the active Silica tokens. ECharts owns all rendering; Silica supplies the palette. ### Chat https://silicaui.com/docs/components/chat/ A message row: avatar, header, bubble, footer. ### Chat Suite https://silicaui.com/docs/components/chat-suite/ The Chat suite — a higher-level layer over the chat/chat-bubble primitives (chat.js): a scrollable message layout, a composer, and the small extras a real conversation needs (system dividers, grouped metadata, a collapsible tool-call detail). ### Checkbox https://silicaui.com/docs/components/checkbox/ A restyled native . All native attributes (checked, defaultChecked, onChange, disabled, …) pass through. ### Checkbox Group https://silicaui.com/docs/components/checkbox-group/ A managed set of checkboxes whose value is the array of checked items. Pair with CheckboxOptions. ### Collapse https://silicaui.com/docs/components/collapse/ A native
    disclosure. Give several the same name for an exclusive accordion (only one open at a time). ### Collapsible https://silicaui.com/docs/components/collapsible/ A single show/hide disclosure (Base UI behavior, animated height). The primitive behind Accordion; use it when you have just one region to reveal. ### 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 required. ### 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/ A live days/hours/minutes/seconds display. ### 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/ A typeable, segmented date field (month/day/year cells you type digits into directly, à la native ), not a calendar-only picker. ### Date Time Input https://silicaui.com/docs/components/date-time-input/ DateInput + TimeInput fused into one segmented field sharing a single Date value, for the common "when exactly" case (appointments, deadlines, scheduled posts) without stitching two widgets together yourself. ### 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 runtime in static HTML. ### Diff https://silicaui.com/docs/components/diff/ A draggable before/after comparison. ### Divider https://silicaui.com/docs/components/divider/ A plain or labeled separator. ### Dock https://silicaui.com/docs/components/dock/ A bottom navigation bar of icon+label items. ### Drawer https://silicaui.com/docs/components/drawer/ A panel that slides in from an edge (Base UI Dialog behavior). ### Dropdown https://silicaui.com/docs/components/dropdown/ The Dropdown Menu surface — the visual half of the Base-UI-backed Menu (click-triggered command menu). Named .dropdown* to avoid colliding with the static .menu nav-list component. ### 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/ The centered "nothing here yet" placeholder — icon, title, description, and an action row. Drop it into an empty list, a table body, a card, or a panel. ### Field https://silicaui.com/docs/components/field/ An accessible form field. Base UI wires the label, control, description, and error together (ids, aria, validity tracking); Silica styles them. Wrap any Silica control. ### Fieldset https://silicaui.com/docs/components/fieldset/ A labeled, vertically-stacked group of form controls. ### File Input https://silicaui.com/docs/components/file-input/ A styled . ### File Upload https://silicaui.com/docs/components/file-upload/ FileUpload — a Dropzone plus a managed preview list. ### Filter https://silicaui.com/docs/components/filter/ A single-select row of chips with a reset, for faceted product/category filtering. Radio semantics: one chip at a time; the reset clears the choice. Pair with FilterItems. ### Footer https://silicaui.com/docs/components/footer/ A responsive multi-column site footer. ### Form https://silicaui.com/docs/components/form/ A
    that coordinates its Fields' validation. ### Hero https://silicaui.com/docs/components/hero/ A full-width banner that centers its content. ### 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 available in React, framework-neutral HTML, and a zero-dependency vanilla runtime. No runtime CSS-in-JS, no safelist. ### Indicator https://silicaui.com/docs/components/indicator/ Pins an overlay to a corner of its content. ### 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/ Positioning shell for an Input with a leading/trailing icon or button — search icon, password show/hide, clear button, and the like. ### Join https://silicaui.com/docs/components/join/ Merges its children into one seamless segmented group. ### Kbd https://silicaui.com/docs/components/kbd/ An inline keyboard-key cap. Press. ### Label https://silicaui.com/docs/components/label/ A plain, muted caption for a control. ### Lightbox https://silicaui.com/docs/components/lightbox/ A full-viewport image viewer for a gallery. Not a trigger itself: render your own thumbnails and drive index (controlled or uncontrolled) from their click handlers. ### Link https://silicaui.com/docs/components/link/ A styled inline anchor. ### List https://silicaui.com/docs/components/list/ A vertical list of rows. ### Loading https://silicaui.com/docs/components/loading/ A spinner. Inherits currentColor, so color it with a text-* utility or let it match the surrounding text. ### Marquee https://silicaui.com/docs/components/marquee/ An infinitely-looping ticker. ### Mask https://silicaui.com/docs/components/mask/ Clips its content (usually an ) to a shape. ### Menu https://silicaui.com/docs/components/menu/ A styled list of links/actions. ### Menubar https://silicaui.com/docs/components/menubar/ A bar of menus (File / Edit / View …). Behavior from Base UI (arrow between menus, hover to switch once open, roving focus). Each menu is a MenubarMenu; its popup reuses the shared .dropdown* surface. ### Metadata List https://silicaui.com/docs/components/metadata-list/ A key/value property list (a real
    ). Compose it from MetadataItems, which each render a
    /
    pair as direct grid children of the list. ### Meter https://silicaui.com/docs/components/meter/ A static measurement within a known range (disk usage, score, capacity). Behavior/accessibility from Base UI's Meter; look from Silica. ### Mockup https://silicaui.com/docs/components/mockup/ The Mockup components — frames for showcasing UI and code in docs and marketing pages. Colorless (the code frame paints itself with the neutral surface). ### 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/ A top bar with optional start / center / end slots. ### Navigation Menu https://silicaui.com/docs/components/navigation-menu/ A site-nav bar with rich dropdown panels (mega menu). Behavior from Base UI (shared animated viewport that resizes between panels); look from Silica. ### Number Field https://silicaui.com/docs/components/number-field/ A stepper input (Base UI: clamping, keyboard, scrub). ### Outline https://silicaui.com/docs/components/outline/ A scroll-spy table of contents, built from scratch (no IntersectionObserver ambiguity — a heading is "active" once its top has scrolled past offset, the last such heading in document order wins). ### Overflow List https://silicaui.com/docs/components/overflow-list/ A single-row list (avatars, tags, breadcrumbs-like items) that measures the available width and folds whatever doesn't fit into a "+N" indicator, instead of wrapping or clipping. ### Overlay https://silicaui.com/docs/components/overlay/ A contextual scrim anchored to a media element, for presenting info/actions specific to what's behind it (a caption on a photo, a "Play" button on a video thumbnail, hover actions on a gallery grid item). ### Pagination https://silicaui.com/docs/components/pagination/ Page controls with prev/next and ellipsis. ### Password Input https://silicaui.com/docs/components/password-input/ An Input with a leading lock affix slot reserved and a trailing show/hide toggle. ### Phone Input https://silicaui.com/docs/components/phone-input/ A country-code Select joined to a national-number Input (via Join), with a lightweight generic digit-grouping formatter. ### Pin Input https://silicaui.com/docs/components/pin-input/ A row of single-character cells for OTP / verification codes. ### Popover https://silicaui.com/docs/components/popover/ A click-triggered floating panel (Base UI). ### Power Search https://silicaui.com/docs/components/power-search/ A search field that mixes free text with structured field: value filter chips (GitHub/Linear-style). Drive it with usePowerSearchConfig — this component is purely a view over that state. ### Preview Card https://silicaui.com/docs/components/preview-card/ A hover/focus link preview (hovercard). Behavior from Base UI, look from Silica's .preview-card CSS. ### Progress https://silicaui.com/docs/components/progress/ A task-completion bar (div-based, so it renders identically across engines; see the CSS component for why not native ). ### Prose https://silicaui.com/docs/components/prose/ Typographic defaults for a block of rich/markdown content. ### Radial Progress https://silicaui.com/docs/components/radial-progress/ A circular progress ring with a centered label. ### Radio https://silicaui.com/docs/components/radio/ A restyled native . Group them by giving several the same name. All native attributes pass through. ### Radio Group https://silicaui.com/docs/components/radio-group/ A managed set of radios (native inputs, so arrow-key navigation comes free). Pair with RadioOptions. ### Range https://silicaui.com/docs/components/range/ A slider (Base UI behavior). ### Rating https://silicaui.com/docs/components/rating/ A row of star buttons. ### 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 × size × shape props, and available in React, framework-neutral HTML, and a zero-dependency vanilla runtime. No runtime CSS-in-JS, no safelist. ### Rich Text Editor https://silicaui.com/docs/components/rich-text-editor/ RichTextEditor — a TipTap editor with a Silica-styled toolbar and content surface. Emits HTML via onValueChange; control it with value or run uncontrolled with defaultValue. ### Scroll Area https://silicaui.com/docs/components/scroll-area/ A panel with custom overlay scrollbars. ### Scroll Strip https://silicaui.com/docs/components/scroll-strip/ A horizontal strip that says so when there is more of it off-screen. ### Search Input https://silicaui.com/docs/components/search-input/ An Input with a leading search icon and a trailing clear button that appears once there's a value. ### Select (Advanced) https://silicaui.com/docs/components/select-menu/ The Select (listbox) surface — the visual half of the Base-UI-backed Select, a fully-styled, keyboard-driven, optionally-multi listbox. ### 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/ A selectable list of rows (single- or multi-select), each with a leading Checkbox/Radio indicator that mirrors row state. ### Sidebar https://silicaui.com/docs/components/sidebar/ A persistent layout nav panel, distinct from Drawer (which overlays content and dismisses). A Sidebar never overlays: it collapses IN PLACE to a narrow icon rail. ### Skeleton https://silicaui.com/docs/components/skeleton/ An animated placeholder for loading content. ### Slider https://silicaui.com/docs/components/slider/ A rich range input (Base UI behavior). Pass a number for a single thumb, or a tuple for a two-thumb range selection; the number of thumbs follows the shape of value/defaultValue. ### Sortable List https://silicaui.com/docs/components/sortable-list/ SortableList — a drag-to-reorder list over dnd-kit. ### Stack https://silicaui.com/docs/components/stack/ Layers its children into a peeking deck (first child on top). With interactive, clicking (or Enter/Space) cycles the front card to the back so you can flip through the deck; the re-stack animates. ### Stat https://silicaui.com/docs/components/stat/ A single metric block. Compose from parts. ### Status https://silicaui.com/docs/components/status/ A small status dot, optionally pinging. ### Steps https://silicaui.com/docs/components/steps/ A horizontal progress tracker. Children are s; color the ones up to (and including) the current step to show completion. ### Swap https://silicaui.com/docs/components/swap/ Cross-fades (or rotates/flips) between two icons on toggle. ### Switch https://silicaui.com/docs/components/switch/ An accessible on/off toggle (Base UI: role="switch" with a hidden real input, so it submits in a form and pairs with Field). ### Table https://silicaui.com/docs/components/table/ A styled . Compose it from plain semantic rows; the CSS styles the native elements, so no per-cell classes are needed. ### Tabs https://silicaui.com/docs/components/tabs/ Base UI selection state + roving focus + a moving indicator. ### Tag Input https://silicaui.com/docs/components/tag-input/ A chip-based multi-value text field — tags for segments, recipients, categories, and the like. Type and press Enter (or comma) to add; Backspace on an empty field removes the last tag. ### Textarea https://silicaui.com/docs/components/textarea/ A multi-line text field. Thin, presentational wrapper around a native