# NachUI

> Editorial, zero-dependency React components you copy straight into your repository. No npm wrapper and no black boxes, so you own the source, the design tokens and the patterns. Written to be read by the developer and by whatever agent is helping them.

Each link below serves the raw markdown of that page. Append `.md` to any docs URL to get its source.

## Getting started

- [Introduction](https://nachui.tech/en/docs.md): Learn how to build, customize, and own your React design system with NachUI. The same source your team reads is the source your AI agents read.

## Concepts

- [CLI](https://nachui.tech/en/docs/concepts/cli.md): Use the NachUI CLI to initialize your project, add, update, remove, and list components directly from the terminal.
- [Compound Components](https://nachui.tech/en/docs/concepts/compound-components.md): Learn the compound component pattern for building flexible, typed UI APIs with shared state and explicit slots.
- [Dark Mode](https://nachui.tech/en/docs/concepts/dark-mode.md): Add dark mode support to your application with smooth transitions and system preference detection.
- [llms.txt](https://nachui.tech/en/docs/concepts/llms-txt.md): How to point Claude, Cursor, Windsurf or any other coding agent at the NachUI docs, using llms.txt, raw markdown and installable skills.
- [Skills](https://nachui.tech/en/docs/concepts/skills.md): Installable instructions that teach an AI assistant how NachUI components are built, composed and documented, so the code it writes looks like the rest of your project.
- [Theming](https://nachui.tech/en/docs/concepts/theming.md): The design system behind NachUI — semantic tokens, the theme contract, and how to bend both to your brand.

## UI elements

- [UI Elements](https://nachui.tech/en/docs/elements/ui.md): Explore a registry of React components built from scratch. Code copies directly to your repo for total customization and ownership.
- [Accordion](https://nachui.tech/en/docs/elements/ui/accordion.md): Toggle content sections. Keep layouts clean. Focus user attention.
- [Attachment](https://nachui.tech/en/docs/elements/ui/attachment.md): Show files as rows, cards or chips with a preview, size, actions and upload progress.
- [Avatar](https://nachui.tech/en/docs/elements/ui/avatar.md): Display user profiles. Robust fallbacks. Build trust visually.
- [Badge](https://nachui.tech/en/docs/elements/ui/badge.md): Highlight key statuses. Draw attention to critical metrics.
- [Banner](https://nachui.tech/en/docs/elements/ui/banner.md): Global alerts. Drive critical actions. Ensure visibility.
- [Breadcrumb](https://nachui.tech/en/docs/elements/ui/breadcrumb.md): Clear navigation hierarchy. Keep users oriented at all times.
- [Bubble](https://nachui.tech/en/docs/elements/ui/bubble.md): The message surface for chat interfaces, with variants and reactions.
- [Button](https://nachui.tech/en/docs/elements/ui/button.md): Drive user action. High-converting variants. Clear states.
- [Callout](https://nachui.tech/en/docs/elements/ui/callout.md): Emphasize important information. Guide users effectively.
- [Card](https://nachui.tech/en/docs/elements/ui/card.md): Group related content. Build structured, scannable layouts.
- [Checkbox](https://nachui.tech/en/docs/elements/ui/checkbox.md): Capture boolean input. Fully accessible. Keyboard-ready.
- [Collapsible](https://nachui.tech/en/docs/elements/ui/collapsible.md): Hide secondary content. Reduce visual noise. Improve focus.
- [Command](https://nachui.tech/en/docs/elements/ui/command.md): Display shell commands with one-click copy. Perfect for installation snippets and quick-start guides.
- [Context Menu](https://nachui.tech/en/docs/elements/ui/context-menu.md): A right-click menu with items, shortcuts and keyboard navigation.
- [Dialog](https://nachui.tech/en/docs/elements/ui/dialog.md): Focus user attention. Block background interaction. Command action.
- [Drawer](https://nachui.tech/en/docs/elements/ui/drawer.md): Slide-in context. Preserve page state. Seamless mobile UX.
- [Dropdown Menu](https://nachui.tech/en/docs/elements/ui/dropdown-menu.md): Group secondary actions. Save screen space. Keep UI clean.
- [Empty](https://nachui.tech/en/docs/elements/ui/empty.md): Empty states with media, copy and a clear next step.
- [Field](https://nachui.tech/en/docs/elements/ui/field.md): Label, control, helper text and errors composed into one accessible form field. Vertical, horizontal or responsive.
- [File Upload](https://nachui.tech/en/docs/elements/ui/file-upload.md): Drag and drop or browse for files, with validation, previews and a hook for custom UIs.
- [Frame](https://nachui.tech/en/docs/elements/ui/frame.md): A structured container that nests panels, like a card inside a card.
- [Hover Card](https://nachui.tech/en/docs/elements/ui/hover-card.md): Rich preview that opens when a link or trigger is hovered or focused. Delays, sides and alignment.
- [Icon Tile](https://nachui.tech/en/docs/elements/ui/icon-tile.md): A consistent square surface for an icon, initials or a short label.
- [Input](https://nachui.tech/en/docs/elements/ui/input.md): Capture user data. Built-in validation states. Error prevention.
- [Kbd](https://nachui.tech/en/docs/elements/ui/kbd.md): Display keyboard shortcuts. Educate power users. Speed up workflows.
- [Label](https://nachui.tech/en/docs/elements/ui/label.md): Accessible form labels. Link text to inputs. Boost completion rates.
- [Message](https://nachui.tech/en/docs/elements/ui/message.md): Conversation row layout with avatar, header, footer and alignment.
- [Navigation Menu](https://nachui.tech/en/docs/elements/ui/navigation-menu.md): A horizontal navigation bar with click-triggered link panels.
- [Pagination](https://nachui.tech/en/docs/elements/ui/pagination.md): Page navigation with previous and next links, numbers and ellipses.
- [Popover](https://nachui.tech/en/docs/elements/ui/popover.md): Contextual details on demand. Non-blocking UI. Keep context.
- [Progress](https://nachui.tech/en/docs/elements/ui/progress.md): Show task completion. Manage user expectations. Reduce abandonment.
- [Radio](https://nachui.tech/en/docs/elements/ui/radio.md): Exclusive selections. Clear visual state. Prevent user errors.
- [Rating](https://nachui.tech/en/docs/elements/ui/rating.md): Star ratings you can click, hover and drive with the keyboard. Half steps, read-only display and custom icons.
- [Resizable](https://nachui.tech/en/docs/elements/ui/resizable.md): Panel groups with draggable, keyboard accessible handles. Horizontal, vertical and nested layouts.
- [Scroll Area](https://nachui.tech/en/docs/elements/ui/scroll-area.md): A scrollable region with a custom, theme-aware scrollbar that appears on hover or while scrolling.
- [Select](https://nachui.tech/en/docs/elements/ui/select.md): Pick from lists. Custom styling. Simplify complex choices.
- [Separator](https://nachui.tech/en/docs/elements/ui/separator.md): Divide sections visually. Structure complex UIs. Create hierarchy.
- [Skeleton](https://nachui.tech/en/docs/elements/ui/skeleton.md): Indicate loading state. Reduce perceived wait time. Keep users engaged.
- [Spinner](https://nachui.tech/en/docs/elements/ui/spinner.md): Show active processes. Simple, clear feedback. Prevent duplicate actions.
- [Sprite](https://nachui.tech/en/docs/elements/ui/sprite.md): A pixel character built from swappable parts, that walks, sits and works.
- [Switch](https://nachui.tech/en/docs/elements/ui/switch.md): Instant boolean toggles. Immediate feedback. Modern UX.
- [Table](https://nachui.tech/en/docs/elements/ui/table.md): Organize dense data. Clean, readable rows. Facilitate analysis.
- [Tabs](https://nachui.tech/en/docs/elements/ui/tabs.md): Organize content into views. Avoid page reloads. Improve navigation.
- [Textarea](https://nachui.tech/en/docs/elements/ui/textarea.md): Multi-line text input with label, helper text, validation, auto-resize and a character count.
- [Timeline](https://nachui.tech/en/docs/elements/ui/timeline.md): Events in order, vertical or horizontal, with indicators, dates and a completed state.
- [Toast](https://nachui.tech/en/docs/elements/ui/toast.md): Non-intrusive feedback. Auto-dismiss alerts. Confirm success instantly.
- [Tooltip](https://nachui.tech/en/docs/elements/ui/tooltip.md): Explain UI elements on hover. Keep interface minimal. Educate users.
- [Tree](https://nachui.tech/en/docs/elements/ui/tree.md): Hierarchical data with expandable nodes, selection and keyboard navigation.
- [Typography](https://nachui.tech/en/docs/elements/ui/typography.md): A polymorphic text component for consistent headings, paragraphs, lead text, and inline code styling.

## Layout elements

- [Layout Elements](https://nachui.tech/en/docs/elements/layout.md): Primitives to layout, group, and structure components within a design system.
- [Aspect Ratio](https://nachui.tech/en/docs/elements/layout/aspect-ratio.md): Keep a box at a fixed proportion for images, video and embeds.
- [Center](https://nachui.tech/en/docs/elements/layout/center.md): Center children on one or both axes without writing the flex classes again.
- [Container](https://nachui.tech/en/docs/elements/layout/container.md): Constrains and centers content horizontally based on screen breakpoints.
- [Flex](https://nachui.tech/en/docs/elements/layout/flex.md): Layout component based on CSS Flexbox for alignment, direction, wrapping, and spacing of child elements.
- [Grid](https://nachui.tech/en/docs/elements/layout/grid.md): A responsive grid layout builder using CSS Grid properties and Tailwind utilities.
- [Section](https://nachui.tech/en/docs/elements/layout/section.md): Page sections with consistent vertical rhythm, background tones and a header with eyebrow, title, description and actions.
- [Spacer](https://nachui.tech/en/docs/elements/layout/spacer.md): Flexible or fixed space between siblings. Pushes items apart in a Flex, or adds a gap in a Stack.
- [Split](https://nachui.tech/en/docs/elements/layout/split.md): Two columns at a set proportion that stack below a breakpoint. Sidebars, settings pages and media with text.
- [Stack](https://nachui.tech/en/docs/elements/layout/stack.md): A layout utility that structures elements in a single column (or row) with consistent gaps.

## Optional

- [Sitemap](https://nachui.tech/sitemap.xml)
- [Docs index (JSON)](https://nachui.tech/api/docs)