# Zenox UI

> @zenoxai/ui is the Zenox design system: React components built on Base UI and styled with Tailwind CSS v4 design tokens, for every Zenox platform application.

Install it, import `@zenoxai/ui/styles.css` after Tailwind, and import components from `@zenoxai/ui/components/<name>` or `@zenoxai/ui/patterns/<name>`. The package ships its own AI docs in `node_modules/@zenoxai/ui/ai/` (USAGE.md, components.md, components.json).

## Getting started

- [Introduction](https://ui.zenox.services/getting-started/introduction.md): What @zenoxai/ui is, what it contains and how it is organized.
- [Installation](https://ui.zenox.services/getting-started/installation.md): Add @zenoxai/ui to a React application with Tailwind CSS v4.
- [AI agents](https://ui.zenox.services/getting-started/ai-agents.md): How coding agents find and use the design system, in this repository and in the apps that consume it.

## Foundations

- [Colors](https://ui.zenox.services/foundations/colors.md): The semantic color tokens every component paints with, in light and dark.
- [Typography](https://ui.zenox.services/foundations/typography.md): Typefaces, the type scale and how to set text in a dense interface.
- [Radius and spacing](https://ui.zenox.services/foundations/radius.md): The corner radius scale and the spacing conventions of a dense interface.
- [Motion](https://ui.zenox.services/foundations/motion.md): Durations and easings for transitions, and how reduced motion is handled.
- [Icons](https://ui.zenox.services/foundations/icons.md): Lucide icons, their sizes and how to place them in components.
- [Dark mode](https://ui.zenox.services/foundations/dark-mode.md): How the theme switches, how to force light in a region, and how components follow.
- [Brand](https://ui.zenox.services/foundations/brand.md): The Zenox and Tellyu marks, their colors and how to place them.

## Guidelines

- [Writing](https://ui.zenox.services/guidelines/writing.md): How to write interface text in Zenox products, from button labels to error messages.
- [Action placement](https://ui.zenox.services/guidelines/action-placement.md): Where actions go on a page, in which order, and which button variant each one takes.
- [Messages and feedback](https://ui.zenox.services/guidelines/messages.md): Which component tells the user what, from field errors to toasts, banners and confirmations.
- [Data display](https://ui.zenox.services/guidelines/data-display.md): How Zenox shows tables, identifiers, times, empty values and severity, the content analysts read all day.
- [Empty states](https://ui.zenox.services/guidelines/empty-states.md): What to show when there is nothing to show, and how to write it so the user knows what to do next.
- [Layout and craft](https://ui.zenox.services/guidelines/layout-and-craft.md): Small rules that keep Zenox interfaces consistent, each with an ID to cite in reviews and prompts.

## Components

- [Accordion](https://ui.zenox.services/components/accordion.md): A stack of headings that each expand to reveal a section of content.
- [Alert](https://ui.zenox.services/components/alert.md): A message inside the page that tells the user about a state, a risk or a change they need to know about.
- [Alert Dialog](https://ui.zenox.services/components/alert-dialog.md): A dialog that interrupts the user to confirm an irreversible or consequential action.
- [Aspect Ratio](https://ui.zenox.services/components/aspect-ratio.md): Keeps a box at a fixed width-to-height ratio as its width changes.
- [Avatar](https://ui.zenox.services/components/avatar.md): A round image or initials that stand for a user, an analyst or a tenant.
- [Badge](https://ui.zenox.services/components/badge.md): A short label that tags a record with an attribute, a category or a count.
- [Breadcrumb](https://ui.zenox.services/components/breadcrumb.md): Shows where the current page sits in the hierarchy and links back to its parents.
- [Button](https://ui.zenox.services/components/button.md): Triggers an action or an event, such as submitting a form, opening a dialog or deleting a record.
- [Button Group](https://ui.zenox.services/components/button-group.md): Joins related buttons, inputs and labels into one control with shared borders.
- [Calendar](https://ui.zenox.services/components/calendar.md): A month grid for picking a single date or a date range.
- [Card](https://ui.zenox.services/components/card.md): A bordered surface that groups the content and actions of one subject.
- [Carousel](https://ui.zenox.services/components/carousel.md): A row of slides that the user moves through with buttons, swipes or arrow keys.
- [Chart](https://ui.zenox.services/components/chart.md): A Recharts wrapper that colors series from the chart tokens and adds a matching tooltip and legend.
- [Checkbox](https://ui.zenox.services/components/checkbox.md): Turns a single option on or off, or picks any number of options from a list.
- [Collapsible](https://ui.zenox.services/components/collapsible.md): A region of content that the user can show and hide with a trigger.
- [Combobox](https://ui.zenox.services/components/combobox.md): A text input that filters a list of options as the user types, for picking one or several values from a long list.
- [Command](https://ui.zenox.services/components/command.md): A searchable list of pages and actions, inline or as a command palette in a dialog.
- [Context Menu](https://ui.zenox.services/components/context-menu.md): A menu of actions for an element, opened with a right-click or a long press.
- [Dialog](https://ui.zenox.services/components/dialog.md): A window over the page that asks the user to complete a short task without leaving the current view.
- [Direction](https://ui.zenox.services/components/direction.md): Tells the Base UI components that the interface reads right to left.
- [Drawer](https://ui.zenox.services/components/drawer.md): A panel that slides in from an edge of the screen and closes with a swipe, for touch-first layouts.
- [Dropdown Menu](https://ui.zenox.services/components/dropdown-menu.md): A list of actions or options that opens from a button.
- [Empty](https://ui.zenox.services/components/empty.md): The parts of an empty state, for a page or a region that has nothing to show yet.
- [Field](https://ui.zenox.services/components/field.md): Lays out a form control with its label, description and error message, and groups fields into sections.
- [Filter Chip](https://ui.zenox.services/components/filter-chip.md): Shows one applied filter, its field and value, with an optional button to remove it.
- [Hover Card](https://ui.zenox.services/components/hover-card.md): A preview of the record behind a link, shown when the pointer rests on the link.
- [Input](https://ui.zenox.services/components/input.md): A single-line text field for typing a value, such as a name, a domain, an IP range or a search query.
- [Input Group](https://ui.zenox.services/components/input-group.md): An input or textarea with icons, text or buttons attached inside its border.
- [Input OTP](https://ui.zenox.services/components/input-otp.md): A row of single-character boxes for entering a one-time code, such as a verification or recovery code.
- [Item](https://ui.zenox.services/components/item.md): A row with media, a title, a description and actions, for lists of records and settings.
- [Kbd](https://ui.zenox.services/components/kbd.md): Shows a key or a key combination the user can press, in text, tooltips and menus.
- [Label](https://ui.zenox.services/components/label.md): The visible name of a form control, read by screen readers and clickable to focus or toggle the control.
- [Logo](https://ui.zenox.services/components/logo.md): The Zenox and Tellyu brand marks as React components that paint in currentColor.
- [Menubar](https://ui.zenox.services/components/menubar.md): A horizontal row of menus, like the menu bar of a desktop application.
- [Native Select](https://ui.zenox.services/components/native-select.md): The browser's own select element, styled like the other form controls, for picking one option from a list.
- [Navigation Menu](https://ui.zenox.services/components/navigation-menu.md): A horizontal row of site links, where some open a panel of related links.
- [Number Input](https://ui.zenox.services/components/number-input.md): A text field for a number, with keyboard stepping, optional increment and decrement buttons, and locale-aware formatting.
- [Pagination](https://ui.zenox.services/components/pagination.md): Links that move between the pages of a long list.
- [Popover](https://ui.zenox.services/components/popover.md): A small panel anchored to a button that holds a few controls or a short explanation.
- [Progress](https://ui.zenox.services/components/progress.md): A bar that shows how far a long-running task has advanced.
- [Radio Group](https://ui.zenox.services/components/radio-group.md): Picks exactly one option from a small set, with every option visible at once.
- [Resizable](https://ui.zenox.services/components/resizable.md): Panels separated by handles that the user drags to share space between them.
- [Scroll Area](https://ui.zenox.services/components/scroll-area.md): A scrolling region with a thin scrollbar that looks the same on every platform.
- [Select](https://ui.zenox.services/components/select.md): Picks one option from a short list shown in a popup under a button.
- [Separator](https://ui.zenox.services/components/separator.md): A thin horizontal or vertical rule that divides groups of content.
- [Sheet](https://ui.zenox.services/components/sheet.md): A panel that slides in from an edge of the screen for longer forms and record details.
- [Sidebar](https://ui.zenox.services/components/sidebar.md): The collapsible navigation column of an application shell.
- [Skeleton](https://ui.zenox.services/components/skeleton.md): A pulsing placeholder in the shape of content that is still loading.
- [Slider](https://ui.zenox.services/components/slider.md): Picks a value or a range of values by dragging a thumb along a track.
- [Spinner](https://ui.zenox.services/components/spinner.md): An animated icon that shows an operation is in progress when its duration is unknown.
- [Switch](https://ui.zenox.services/components/switch.md): Turns a single setting on or off, with the change taking effect immediately.
- [Table](https://ui.zenox.services/components/table.md): The styled parts of an HTML table, at the platform's dense row height.
- [Tabs](https://ui.zenox.services/components/tabs.md): Switches between views of the same subject without leaving the page.
- [Textarea](https://ui.zenox.services/components/textarea.md): A multi-line text field for free-form input such as notes, comments and justifications.
- [Toaster](https://ui.zenox.services/components/sonner.md): Brief, non-blocking messages about the result of an action, raised with toast() from sonner.
- [Toggle](https://ui.zenox.services/components/toggle.md): A button that stays pressed or unpressed, for turning a view option on and off.
- [Toggle Group](https://ui.zenox.services/components/toggle-group.md): A set of toggle buttons that share one state, for picking one option or several from a short list.
- [Tooltip](https://ui.zenox.services/components/tooltip.md): A short text label that appears when the pointer rests on, or focus reaches, a control.

## Patterns

- [Confirm Dialog](https://ui.zenox.services/patterns/confirm-dialog.md): Asks the user to confirm an action before it runs, with one awaited call to confirm().
- [Copy Button](https://ui.zenox.services/patterns/copy-button.md): Copies one value to the clipboard, alone or with a pivot action next to a value in a table.
- [Description List](https://ui.zenox.services/patterns/description-list.md): The label and value list of a detail view, such as an asset's properties or an alert's metadata.
- [Empty value](https://ui.zenox.services/patterns/empty-value.md): A muted dash for a missing value in a table, a description list or a detail view, with words for screen readers.
- [Help Tooltip](https://ui.zenox.services/patterns/help-tooltip.md): An info icon that explains a title, a figure or a field on hover and keyboard focus.
- [Info Banner](https://ui.zenox.services/patterns/info-banner.md): A one-line note with an icon that gives context about the content below it.
- [List Empty State](https://ui.zenox.services/patterns/list-empty-state.md): The state of a list, table or card whose request succeeded and returned nothing.
- [List Error State](https://ui.zenox.services/patterns/list-error-state.md): The state of a list, table or card whose request failed, with a way to retry.
- [Page Header](https://ui.zenox.services/patterns/page-header.md): The top line of a page, with its title, an optional hint, page actions and a row of tabs.
- [Section Heading](https://ui.zenox.services/patterns/section-heading.md): A heading with an optional description and action that opens a group inside a page, a card or a settings form.
- [Severity Badge](https://ui.zenox.services/patterns/severity-badge.md): Shows the severity level of an alert, a vulnerability or a finding, with its label.
- [Stat Tile](https://ui.zenox.services/patterns/stat-tile.md): A card with one figure, for the KPI row at the top of a dashboard or list.
- [Status Badge](https://ui.zenox.services/patterns/status-badge.md): Shows the state of a record, such as new, in progress, resolved or failed, as a soft badge with an icon.

## Optional

- [Full documentation](https://ui.zenox.services/llms-full.txt): every page in one file
- [Component registry](https://ui.zenox.services/registry.json): props of every export, as JSON