# XiodUI

> React component library built on Base UI and Tailwind CSS 4. Install `xiod-ui` from npm, import each component from its own subpath (`xiod-ui/button`, never the package root), compose with the `render` prop (there is no `asChild`), and import `xiod-ui/styles` once in your CSS. There is no CLI and nothing is copied into your project.

Every page below is Markdown. Component pages carry the install command, imports, anatomy, a full example and the complete props reference.

## Get Started

- [Introduction](https://ui.xiod.dev/docs/overview/introduction.md): What XiodUI is, how it's shipped, and its licence.
- [Installation](https://ui.xiod.dev/docs/overview/installation.md): Install the package, add the stylesheet, and import your first component.
- [Agent Skill](https://ui.xiod.dev/docs/overview/agent-skill.md): Teach coding agents XiodUI's real API, and migrate from other libraries.

## Styling & Customization

- [Colors](https://ui.xiod.dev/docs/styling/colors.md): Every colour token, what it's for, and how tokens pair up.
- [Typography](https://ui.xiod.dev/docs/styling/typography.md): The Text component's type scale, weights and variants.
- [Themes](https://ui.xiod.dev/docs/styling/themes.md): Ready-made palettes, and letting users switch between them.
- [Customization](https://ui.xiod.dev/docs/styling/customization.md): Override tokens for the whole app, one section, or one element.
- [Icons](https://ui.xiod.dev/docs/styling/icons.md): Swap any built-in icon, per instance or app-wide.
- [Dark Mode](https://ui.xiod.dev/docs/styling/dark-mode.md): Light, dark and system modes with ThemeProvider and useTheme.

## Components

- [Accordion](https://ui.xiod.dev/docs/components/accordion.md): A stack of headings that each expand to reveal a section of content.
- [Agent Steps](https://ui.xiod.dev/docs/components/agent-steps.md): A live list of the steps an AI agent is taking, with a status for each and collapsible logs.
- [Alert](https://ui.xiod.dev/docs/components/alert.md): A callout that draws attention to a message, with an info, success, warning or error tone.
- [Alert Dialog](https://ui.xiod.dev/docs/components/alert-dialog.md): A modal dialog that asks the user to confirm or cancel before continuing.
- [Aspect Ratio](https://ui.xiod.dev/docs/components/aspect-ratio.md): Keeps its content, such as an image or video, at a fixed width-to-height ratio.
- [Autocomplete](https://ui.xiod.dev/docs/components/autocomplete.md): A text input that suggests matching options as the user types.
- [Avatar](https://ui.xiod.dev/docs/components/avatar.md): A user's image, with initials or an icon when the image is missing or still loading.
- [Badge](https://ui.xiod.dev/docs/components/badge.md): A small label for a status, count or category.
- [Breadcrumb](https://ui.xiod.dev/docs/components/breadcrumb.md): Shows where the current page sits in the site's hierarchy, as a trail of links.
- [Button](https://ui.xiod.dev/docs/components/button.md): A button, or a link styled as one, in several variants and sizes.
- [Button Group](https://ui.xiod.dev/docs/components/button-group.md): Joins buttons into one row with shared borders.
- [Button Split](https://ui.xiod.dev/docs/components/button-split.md): A button with a main action and an attached menu of related actions.
- [Calendar](https://ui.xiod.dev/docs/components/calendar.md): A month grid for picking a single date or a range.
- [Card](https://ui.xiod.dev/docs/components/card.md): A bordered panel with a header, body and footer.
- [Carousel](https://ui.xiod.dev/docs/components/carousel.md): A horizontal or vertical slideshow that scrolls with snapping, drag, arrow buttons and the keyboard.
- [Checkbox](https://ui.xiod.dev/docs/components/checkbox.md): A box the user can check or uncheck, with an indeterminate state.
- [Circular Progress](https://ui.xiod.dev/docs/components/circular-progress.md): A ring that shows progress toward completion, or spins while the duration is unknown.
- [Collapsible](https://ui.xiod.dev/docs/components/collapsible.md): A panel that opens and closes from a trigger.
- [Color Picker](https://ui.xiod.dev/docs/components/color-picker.md): A radial colour picker with hue, saturation and alpha controls.
- [Combobox](https://ui.xiod.dev/docs/components/combobox.md): An input with a filterable list of options to choose one or several from.
- [Command](https://ui.xiod.dev/docs/components/command.md): A searchable list of commands, usually opened as a palette with a keyboard shortcut.
- [Context Menu](https://ui.xiod.dev/docs/components/context-menu.md): A menu of actions that opens on right-click or long-press.
- [Copy To Clipboard](https://ui.xiod.dev/docs/components/copy-to-clipboard.md): A button that copies a value to the clipboard and confirms when it has.
- [Corner Badge](https://ui.xiod.dev/docs/components/corner-badge.md): A count or status dot pinned to the corner of another element.
- [Dashboard Grid](https://ui.xiod.dev/docs/components/dashboard-grid.md): A grid of tiles the user can rearrange and resize by dragging or with the keyboard.
- [Date Picker](https://ui.xiod.dev/docs/components/date-picker.md): A field that opens a calendar for picking a date or a range.
- [Dialog](https://ui.xiod.dev/docs/components/dialog.md): A modal window that opens over the page.
- [Dot Matrix](https://ui.xiod.dev/docs/components/dot-matrix.md): An animated grid of dots, for loading states and decorative displays.
- [Draggable](https://ui.xiod.dev/docs/components/draggable.md): A floating panel the user can move, resize, minimize and maximize.
- [Drawer](https://ui.xiod.dev/docs/components/drawer.md): A panel that slides in from an edge of the screen.
- [Empty](https://ui.xiod.dev/docs/components/empty.md): A placeholder for a view with no content yet, with room for an icon, message and action.
- [Field](https://ui.xiod.dev/docs/components/field.md): A form field that ties a label, control, description and validation message together.
- [Fieldset](https://ui.xiod.dev/docs/components/fieldset.md): Groups related form fields under a shared legend.
- [File Upload](https://ui.xiod.dev/docs/components/file-upload.md): A drop zone and file picker with type and size limits, progress and a file list.
- [Form](https://ui.xiod.dev/docs/components/form.md): A form that runs validation and shows each field's errors.
- [Frame](https://ui.xiod.dev/docs/components/frame.md): A bordered container with a header, panels and a footer, for grouping cards or content.
- [Gauge](https://ui.xiod.dev/docs/components/gauge.md): A semicircular dial that shows a value within a range.
- [Grid](https://ui.xiod.dev/docs/components/grid.md): A responsive grid layout with column spans, for dashboards and bento layouts.
- [Group](https://ui.xiod.dev/docs/components/group.md): Joins inputs, buttons and text into one attached segment.
- [Input](https://ui.xiod.dev/docs/components/input.md): A text input field.
- [Input Group](https://ui.xiod.dev/docs/components/input-group.md): An input with icons, text or buttons attached inside its border.
- [Input OTP](https://ui.xiod.dev/docs/components/input-otp.md): A one-time code input with a separate box for each character.
- [Input Payment](https://ui.xiod.dev/docs/components/input-payment.md): Card number, expiry and security code inputs with formatting and card brand detection.
- [Input Phone](https://ui.xiod.dev/docs/components/input-phone.md): A phone number input with a country picker and formatting, submitted in E.164 format.
- [Input Sensitive](https://ui.xiod.dev/docs/components/input-sensitive.md): An input that masks a secret value, with buttons to reveal and copy it.
- [Kbd](https://ui.xiod.dev/docs/components/kbd.md): Shows a keyboard key or shortcut.
- [Kinetic Click](https://ui.xiod.dev/docs/components/kinetic-click.md): Plays a particle burst when the element it wraps is clicked.
- [Label](https://ui.xiod.dev/docs/components/label.md): A text label for a form control.
- [List Box](https://ui.xiod.dev/docs/components/list-box.md): An always-visible list of options to select one or several from.
- [Loader](https://ui.xiod.dev/docs/components/loader.md): An animated indicator that shows something is loading.
- [Marker](https://ui.xiod.dev/docs/components/marker.md): A small line of muted text with an optional icon, for labels, dividers and annotations.
- [Menu](https://ui.xiod.dev/docs/components/menu.md): A dropdown menu of actions, opened from a button.
- [Menubar](https://ui.xiod.dev/docs/components/menubar.md): A horizontal bar of menus, as in a desktop app.
- [Message](https://ui.xiod.dev/docs/components/message.md): Chat message bubbles with avatars, alignment and reactions.
- [Meter](https://ui.xiod.dev/docs/components/meter.md): Shows a measurement within a known range, such as storage used.
- [Morphic Toast](https://ui.xiod.dev/docs/components/morphic-toast.md): A toast that morphs out of a pill-shaped notification.
- [Navigation Menu](https://ui.xiod.dev/docs/components/navigation-menu.md): Site navigation links with dropdown panels.
- [Number Field](https://ui.xiod.dev/docs/components/number-field.md): A numeric input with increment and decrement buttons.
- [Option Picker](https://ui.xiod.dev/docs/components/option-picker.md): A compact dropdown for choosing one option from a short list.
- [Orb](https://ui.xiod.dev/docs/components/orb.md): An animated orb that shows what an AI assistant is doing, such as listening or working.
- [Pagination](https://ui.xiod.dev/docs/components/pagination.md): Links for moving between pages of results.
- [Popover](https://ui.xiod.dev/docs/components/popover.md): A floating panel of content, opened from a button.
- [Preview Card](https://ui.xiod.dev/docs/components/preview-card.md): A card that previews a link's content when the link is hovered or focused.
- [Progress](https://ui.xiod.dev/docs/components/progress.md): A bar that shows how far a task has progressed.
- [Radio](https://ui.xiod.dev/docs/components/radio.md): A set of options where only one can be selected.
- [Resizable](https://ui.xiod.dev/docs/components/resizable.md): Panels separated by handles the user can drag, or move with the arrow keys, to resize.
- [Ruler Picker](https://ui.xiod.dev/docs/components/ruler-picker.md): A value picker drawn as a ruler the user scrolls along.
- [Scroll Area](https://ui.xiod.dev/docs/components/scroll-area.md): A scrollable region with styled scrollbars.
- [Scroll Bar](https://ui.xiod.dev/docs/components/scroll-bar.md): A styled scrollbar that expands on hover and can hide when idle.
- [Select](https://ui.xiod.dev/docs/components/select.md): A button that opens a list of options to choose from.
- [Separator](https://ui.xiod.dev/docs/components/separator.md): A horizontal or vertical line between content.
- [Sidebar](https://ui.xiod.dev/docs/components/sidebar.md): A collapsible side panel for app navigation.
- [Skeleton](https://ui.xiod.dev/docs/components/skeleton.md): A placeholder shape shown while content loads.
- [Slider](https://ui.xiod.dev/docs/components/slider.md): A control for picking a value or range by dragging a thumb along a track.
- [Sortable](https://ui.xiod.dev/docs/components/sortable.md): A list or grid the user can reorder by dragging or with the keyboard.
- [Switch](https://ui.xiod.dev/docs/components/switch.md): A toggle for turning a setting on or off.
- [Table](https://ui.xiod.dev/docs/components/table.md): A table for rows of data.
- [Tabs](https://ui.xiod.dev/docs/components/tabs.md): Switches between panels of content, one visible at a time.
- [Text](https://ui.xiod.dev/docs/components/text.md): Text in the library's type scale, rendered as any element.
- [Textarea](https://ui.xiod.dev/docs/components/textarea.md): A multi-line text input.
- [Timeline](https://ui.xiod.dev/docs/components/timeline.md): Events or steps in order, vertical or horizontal, that can also track progress as a stepper.
- [Toast](https://ui.xiod.dev/docs/components/toast.md): A short message that appears briefly without interrupting the user.
- [Toggle](https://ui.xiod.dev/docs/components/toggle.md): A button that stays pressed or unpressed.
- [Toggle Group](https://ui.xiod.dev/docs/components/toggle-group.md): A set of toggle buttons where one or several can be pressed.
- [Toolbar](https://ui.xiod.dev/docs/components/toolbar.md): A row of buttons and controls, navigable with the arrow keys.
- [Tooltip](https://ui.xiod.dev/docs/components/tooltip.md): A short label that appears when an element is hovered or focused.
- [Waveform](https://ui.xiod.dev/docs/components/waveform.md): An audio waveform, from a file or a live microphone, with scrubbing.
- [Wheel Picker](https://ui.xiod.dev/docs/components/wheel-picker.md): A scrolling wheel for picking a value, like the iOS picker.

## Optional

- [Full documentation](https://ui.xiod.dev/llms-full.txt): every page above in one file
- [Agent Skill](https://github.com/ImKKingshuk/XiodUI/tree/main/skills/xiod-ui): install with `npx skills add ImKKingshuk/XiodUI` for Claude Code, Codex, Cursor and other agents
- [Source](https://github.com/ImKKingshuk/XiodUI)