# Modra

> Modra 是基于 Radix + cva + Tailwind v4 的 React 设计系统，附带令牌（@modra/tokens）、Tailwind 预设与面向普通网站的 HTML/CSS 配方（@modra/website）。

先阅读接入指南，再按需读取单个组件文档。组件 props 以下列文档为准，不要臆造。

## 入门

- [接入指南（AI 必读）](/ai/integration-guide.md): 安装、样式入口、peer 依赖、主题规则、常见错误
- [AGENTS.md 模板](/ai/AGENTS.template.md): 复制到使用方项目的 AI 约定文件
- [全文合集](/llms-full.txt): 接入指南 + 选型指引 + 全部组件 API，适合一次性载入

## 站点页面

- [组件目录](/components): 组件示例与 props
- [用法](/usage)
- [令牌](/tokens)
- [普通网站接入](/website)
- [图标](/icons)

## 核心组件（Core）

高频、稳定、默认推荐的基础组件。

- [alert](/ai/components/alert.md)
- [avatar](/ai/components/avatar.md)
- [badge](/ai/components/badge.md)
- [breadcrumb](/ai/components/breadcrumb.md)
- [button](/ai/components/button.md)
- [card](/ai/components/card.md)
- [checkbox](/ai/components/checkbox.md)
- [dialog](/ai/components/dialog.md)
- [dropdown-menu](/ai/components/dropdown-menu.md)
- [empty](/ai/components/empty.md)
- [form](/ai/components/form.md)
- [input](/ai/components/input.md)
- [label](/ai/components/label.md)
- [pagination](/ai/components/pagination.md)
- [popover](/ai/components/popover.md)
- [progress](/ai/components/progress.md)
- [radio-group](/ai/components/radio-group.md)
- [select](/ai/components/select.md)
- [separator](/ai/components/separator.md)
- [sheet](/ai/components/sheet.md)
- [skeleton](/ai/components/skeleton.md)
- [switch](/ai/components/switch.md)
- [table](/ai/components/table.md)
- [tabbar](/ai/components/tabbar.md)
- [tabs](/ai/components/tabs.md)
- [textarea](/ai/components/textarea.md)
- [tooltip](/ai/components/tooltip.md)
- [layout](/ai/components/layout.md)

## 组合组件（Composite）

面向明确产品任务的组合式能力。

- [accordion](/ai/components/accordion.md)
- [calendar](/ai/components/calendar.md)
- [cascader](/ai/components/cascader.md)
- [collapsible](/ai/components/collapsible.md)
- [combobox](/ai/components/combobox.md)
- [command](/ai/components/command.md)
- [context-menu](/ai/components/context-menu.md)
- [data-table](/ai/components/data-table.md)
- [date-picker](/ai/components/date-picker.md)
- [date-range-picker](/ai/components/date-range-picker.md)
- [date-time-display](/ai/components/date-time-display.md)
- [date-time-picker](/ai/components/date-time-picker.md)
- [date-time-range-picker](/ai/components/date-time-range-picker.md)
- [descriptions](/ai/components/descriptions.md)
- [hover-card](/ai/components/hover-card.md)
- [list](/ai/components/list.md)
- [menu](/ai/components/menu.md)
- [menubar](/ai/components/menubar.md)
- [navigation-menu](/ai/components/navigation-menu.md)
- [popconfirm](/ai/components/popconfirm.md)
- [result](/ai/components/result.md)
- [spin](/ai/components/spin.md)
- [statistic](/ai/components/statistic.md)
- [steps](/ai/components/steps.md)
- [tag](/ai/components/tag.md)
- [timeline](/ai/components/timeline.md)
- [toggle](/ai/components/toggle.md)
- [toggle-group](/ai/components/toggle-group.md)
- [tree](/ai/components/tree.md)
- [tree-select](/ai/components/tree-select.md)
- [typography](/ai/components/typography.md)
- [alert-dialog](/ai/components/alert-dialog.md)
- [app-shell](/ai/components/app-shell.md)
- [async-state](/ai/components/async-state.md)
- [bulk-action-bar](/ai/components/bulk-action-bar.md)
- [copyable-text](/ai/components/copyable-text.md)
- [empty-value](/ai/components/empty-value.md)
- [filter-bar](/ai/components/filter-bar.md)
- [form-layout](/ai/components/form-layout.md)
- [page-container](/ai/components/page-container.md)
- [page-header](/ai/components/page-header.md)
- [row-actions](/ai/components/row-actions.md)
- [settings-row](/ai/components/settings-row.md)
- [stat-card](/ai/components/stat-card.md)
- [status-badge](/ai/components/status-badge.md)
- [toolbar](/ai/components/toolbar.md)
- [truncated-text](/ai/components/truncated-text.md)
- [user-menu](/ai/components/user-menu.md)
- [value-preview](/ai/components/value-preview.md)

## 高级 / 可选能力（Advanced / Optional）

依赖较重或场景较窄，按需引入。

- [aspect-ratio](/ai/components/aspect-ratio.md)
- [color-picker](/ai/components/color-picker.md)
- [echart](/ai/components/echart.md)
- [image-viewer](/ai/components/image-viewer.md)
- [input-number](/ai/components/input-number.md)
- [input-otp](/ai/components/input-otp.md)
- [media-grid](/ai/components/media-grid.md)
- [rate](/ai/components/rate.md)
- [resizable](/ai/components/resizable.md)
- [scroll-area](/ai/components/scroll-area.md)
- [slider](/ai/components/slider.md)
- [time-picker](/ai/components/time-picker.md)
- [transfer](/ai/components/transfer.md)
- [upload](/ai/components/upload.md)