# Digitexa UI

> Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens.

## Start here

- [Rules for AI agents](https://ui.digitexa.com/docs/ai): how to write UI with this kit
- [Full reference](https://ui.digitexa.com/llms-full.txt): rules, tokens, and every component's API, example and source in one file
- [cli](https://ui.digitexa.com/md/cli.md)
- [installation](https://ui.digitexa.com/md/installation.md)
- [introduction](https://ui.digitexa.com/md/introduction.md)
- [theming](https://ui.digitexa.com/md/theming.md)
- [changelog](https://ui.digitexa.com/md/changelog.md)

## Components

- [theme](https://ui.digitexa.com/r/theme.md): Tokens (light/dark, 6 accents, density) and the Tailwind v4 mapping.
- [utils](https://ui.digitexa.com/r/utils.md): cn(): clsx + tailwind-merge, aware of the kit's font scale.
- [use-now](https://ui.digitexa.com/r/use-now.md): useNow(): a client-only clock (null on the server) for prerender-safe dates.
- [button](https://ui.digitexa.com/r/button.md): 6 variants, 6 sizes, asChild, never submits by accident.
- [input](https://ui.digitexa.com/r/input.md): 3 sizes, error state via aria-invalid.
- [textarea](https://ui.digitexa.com/r/textarea.md): Grows with its content.
- [label](https://ui.digitexa.com/r/label.md): Form label that dims with a disabled peer.
- [checkbox](https://ui.digitexa.com/r/checkbox.md): Checked, unchecked and indeterminate.
- [switch](https://ui.digitexa.com/r/switch.md): On/off toggle.
- [radio-group](https://ui.digitexa.com/r/radio-group.md): Radio buttons and selectable cards (RadioCard) for visual choices.
- [select](https://ui.digitexa.com/r/select.md): Accessible single select with groups and labels.
- [toggle-group](https://ui.digitexa.com/r/toggle-group.md): Segmented control with arrow-key navigation.
- [tabs](https://ui.digitexa.com/r/tabs.md): Segmented or underline tabs.
- [badge](https://ui.digitexa.com/r/badge.md): Semantic and work status variants, StatusBadge.
- [status-icon](https://ui.digitexa.com/r/status-icon.md): Status glyphs that show progress: backlog, to do, in progress, review, done.
- [avatar](https://ui.digitexa.com/r/avatar.md): Image with initials fallback, stable tint per name, AvatarGroup.
- [kbd](https://ui.digitexa.com/r/kbd.md): Keyboard shortcut hint.
- [card](https://ui.digitexa.com/r/card.md): Card with header/content/footer, plus StatGroup and Stat for key numbers.
- [table](https://ui.digitexa.com/r/table.md): Dense data table with density-aware rows.
- [progress](https://ui.digitexa.com/r/progress.md): Thin progress bar with tones.
- [meter](https://ui.digitexa.com/r/meter.md): Stacked distribution bar for status breakdowns and workload.
- [separator](https://ui.digitexa.com/r/separator.md): Horizontal or vertical rule.
- [skeleton](https://ui.digitexa.com/r/skeleton.md): Loading placeholder with a shimmer.
- [tooltip](https://ui.digitexa.com/r/tooltip.md): Tooltip with a one-line shorthand.
- [popover](https://ui.digitexa.com/r/popover.md): Floating panel anchored to a trigger.
- [dropdown-menu](https://ui.digitexa.com/r/dropdown-menu.md): Menu with items, checkboxes, radios, shortcuts and submenus.
- [sidebar](https://ui.digitexa.com/r/sidebar.md): App frame: AppShell, Sidebar with groups and items, Topbar.
- [command](https://ui.digitexa.com/r/command.md): Command palette with filtering, groups and full keyboard control; ⌘K hook.
- [dialog](https://ui.digitexa.com/r/dialog.md): Modal with header/body/footer, 3 sizes, scrolls when tall.
- [slider](https://ui.digitexa.com/r/slider.md): Radix slider with one or two thumbs for single values and ranges, labelled per thumb.
- [toggle](https://ui.digitexa.com/r/toggle.md): Two-state pressable button with default and outline variants, sized like Button.
- [field](https://ui.digitexa.com/r/field.md): Form field layout that wires label, description and error ids to the control.
- [input-group](https://ui.digitexa.com/r/input-group.md): Input with leading or trailing icons and text addons in one focus-ringed box.
- [calendar](https://ui.digitexa.com/r/calendar.md): Dependency-free month calendar with single or range selection and full keyboard nav.
- [date-picker](https://ui.digitexa.com/r/date-picker.md): Input-styled trigger that opens a calendar popover; single date and range pickers.
- [combobox](https://ui.digitexa.com/r/combobox.md): Searchable select on Popover and Command, single or multiple with badge chips.
- [alert](https://ui.digitexa.com/r/alert.md): Inline callout in info, success, warning, danger and neutral, with icon, action and dismiss.
- [alert-dialog](https://ui.digitexa.com/r/alert-dialog.md): Confirmation dialog that needs an explicit choice, with a danger action option.
- [sheet](https://ui.digitexa.com/r/sheet.md): Side panel built on Dialog that slides in from any edge, in four sizes.
- [toast](https://ui.digitexa.com/r/toast.md): Dependency-free toasts: call toast(), mount one Toaster; stacks, pauses on hover, promises.
- [spinner](https://ui.digitexa.com/r/spinner.md): Accessible loading spinner in five sizes that takes the current text color.
- [empty-state](https://ui.digitexa.com/r/empty-state.md): Placeholder for empty views with icon, title, description and actions; dashed variant.
- [hover-card](https://ui.digitexa.com/r/hover-card.md): Popover-styled preview card that opens on hover or focus.
- [context-menu](https://ui.digitexa.com/r/context-menu.md): Right-click menu with the same API and styles as DropdownMenu.
- [accordion](https://ui.digitexa.com/r/accordion.md): Single or multiple disclosure sections, plain or card style, animated height and chevron.
- [collapsible](https://ui.digitexa.com/r/collapsible.md): Radix Collapsible with a styled chevron trigger and animated content height.
- [breadcrumb](https://ui.digitexa.com/r/breadcrumb.md): Accessible breadcrumb trail: asChild router links, current page, separators, ellipsis.
- [pagination](https://ui.digitexa.com/r/pagination.md): Page links with ellipses, usePagination hook, ready-made controls and compact status.
- [scroll-area](https://ui.digitexa.com/r/scroll-area.md): Radix ScrollArea with thin themed scrollbars, vertical, horizontal or both.
- [data-table](https://ui.digitexa.com/r/data-table.md): Typed columns, sorting, row selection, filter, column toggle, sticky header, pagination.
- [priority](https://ui.digitexa.com/r/priority.md): Linear-style priority bars: urgent, high, medium, low, none, with labels.
- [task-row](https://ui.digitexa.com/r/task-row.md): List-view task row with status toggle, priority, project, due date; collapsible groups.
- [kanban](https://ui.digitexa.com/r/kanban.md): Controlled dnd-kit board: drag cards across columns by mouse or keyboard, WIP limits.
- [timeline](https://ui.digitexa.com/r/timeline.md): Gantt timeline: day/week scale, status bars, milestones, today line, weekend shading.
- [calendar-view](https://ui.digitexa.com/r/calendar-view.md): Month calendar for scheduled work: 6-week grid, status pills, +N more popover.
- [activity-feed](https://ui.digitexa.com/r/activity-feed.md): Activity feed with avatars, rich sentences, inline statuses and live relative times.