# RefineUI

> Pelagornis design system: `@refineui/tokens` (Foundation variables) and `@refineui/react` (Web Kit components). Docs use real package output, not mockups.

Install: `bun add @refineui/react @refineui/tokens`. Load `@refineui/tokens/tailwind.css`, `@refineui/web-icons/dist/fonts/refineui-system-icons.css`, and `@refineui/react/refineui.css` at the app root.

## Guides

- [Getting started](https://ui.pelagornis.com/getting-started/): Architecture, install, stylesheet, first example
- [AI & Tools](https://ui.pelagornis.com/ai-tools/): DESIGN.md, llms.txt, Skill, Doctor, MCP

## Foundations

- [Overview](https://ui.pelagornis.com/foundations/): Visual language and token model
- [Design tokens](https://ui.pelagornis.com/foundations/design-tokens/): Semantic token introduction
- [Color](https://ui.pelagornis.com/foundations/color/): Palette and alias colors
- [Typography](https://ui.pelagornis.com/foundations/typography/): Type scale and roles
- [Spacing](https://ui.pelagornis.com/foundations/spacing/): Padding and gap scale
- [Sizing](https://ui.pelagornis.com/foundations/sizing/): Dimension tokens
- [Radius](https://ui.pelagornis.com/foundations/radius/): Corner radius
- [Border](https://ui.pelagornis.com/foundations/border/): Stroke widths and borders
- [Elevation](https://ui.pelagornis.com/foundations/elevation/): Shadows and depth
- [Opacity](https://ui.pelagornis.com/foundations/opacity/): Opacity and overlays
- [Motion](https://ui.pelagornis.com/foundations/motion/): Duration, easing, distance
- [Z-index](https://ui.pelagornis.com/foundations/z-index/): Layering scale
- [Layout](https://ui.pelagornis.com/foundations/layout/): Container, grid, alignment, responsive layout
- [Iconography](https://github.com/pelagornis/refineui-system-icons): System icons (external repo)

## Components

- [Overview](https://ui.pelagornis.com/components/): Catalog and live previews
- [Accordion](https://ui.pelagornis.com/components/accordion/)
- [Alert](https://ui.pelagornis.com/components/alert/)
- [Avatar](https://ui.pelagornis.com/components/avatar/)
- [Avatars](https://ui.pelagornis.com/components/avatars/)
- [Badge](https://ui.pelagornis.com/components/badge/)
- [Box](https://ui.pelagornis.com/components/box/)
- [Breadcrumb](https://ui.pelagornis.com/components/breadcrumb/)
- [Bubble](https://ui.pelagornis.com/components/bubble/)
- [Button](https://ui.pelagornis.com/components/button/)
- [Button Group](https://ui.pelagornis.com/components/button-group/)
- [Calendar](https://ui.pelagornis.com/components/calendar/)
- [Card](https://ui.pelagornis.com/components/card/)
- [Carousel](https://ui.pelagornis.com/components/carousel/)
- [Chart](https://ui.pelagornis.com/components/chart/)
- [Checkbox](https://ui.pelagornis.com/components/checkbox/)
- [Command](https://ui.pelagornis.com/components/command/): Command palette with search
- [Container](https://ui.pelagornis.com/components/container/)
- [Dialog](https://ui.pelagornis.com/components/dialog/)
- [Divider](https://ui.pelagornis.com/components/divider/)
- [Drawer](https://ui.pelagornis.com/components/drawer/)
- [Dropdown](https://ui.pelagornis.com/components/dropdown/)
- [Field](https://ui.pelagornis.com/components/field/)
- [Footer](https://ui.pelagornis.com/components/footer/)
- [Grid](https://ui.pelagornis.com/components/grid/)
- [Input](https://ui.pelagornis.com/components/input/)
- [Input OTP](https://ui.pelagornis.com/components/input-otp/)
- [Label](https://ui.pelagornis.com/components/label/)
- [Link](https://ui.pelagornis.com/components/link/)
- [Menu](https://ui.pelagornis.com/components/menu/)
- [Navigation Menu](https://ui.pelagornis.com/components/navigation-menu/)
- [Pagination](https://ui.pelagornis.com/components/pagination/)
- [Popover](https://ui.pelagornis.com/components/popover/)
- [Progress](https://ui.pelagornis.com/components/progress/)
- [Progress Stepper](https://ui.pelagornis.com/components/progress-stepper/)
- [Radio](https://ui.pelagornis.com/components/radio/)
- [Resizable](https://ui.pelagornis.com/components/resizable/)
- [Scroll Area](https://ui.pelagornis.com/components/scroll-area/)
- [Search Field](https://ui.pelagornis.com/components/search-field/)
- [Segmented Control](https://ui.pelagornis.com/components/segmented-control/)
- [Select](https://ui.pelagornis.com/components/select/)
- [Sidebar](https://ui.pelagornis.com/components/sidebar/)
- [Skeleton](https://ui.pelagornis.com/components/skeleton/)
- [Slider](https://ui.pelagornis.com/components/slider/)
- [Spin Button](https://ui.pelagornis.com/components/spin-button/)
- [Spinner](https://ui.pelagornis.com/components/spinner/)
- [Stack](https://ui.pelagornis.com/components/stack/)
- [Stepper](https://ui.pelagornis.com/components/stepper/)
- [Switch](https://ui.pelagornis.com/components/switch/)
- [Table](https://ui.pelagornis.com/components/table/)
- [Tabs](https://ui.pelagornis.com/components/tabs/)
- [Tag](https://ui.pelagornis.com/components/tag/)
- [Textarea](https://ui.pelagornis.com/components/textarea/)
- [Toast](https://ui.pelagornis.com/components/toast/)
- [Toggle Button](https://ui.pelagornis.com/components/toggle-button/)
- [Tooltip](https://ui.pelagornis.com/components/tooltip/)
- [Tree](https://ui.pelagornis.com/components/tree/)

## Development

- [Overview](https://ui.pelagornis.com/development/): Build with RefineUI in product code
- [Installation](https://ui.pelagornis.com/development/installation/): Packages, Tailwind, project setup
- [Theming](https://ui.pelagornis.com/development/theming/): Light/dark and semantic aliases
- [Motion](https://ui.pelagornis.com/development/motion/): Motion roles in components

## AI & Tools

- [Overview](https://ui.pelagornis.com/ai-tools/): LLM indexes, Skill, Doctor, MCP
- [DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch-compatible design identity for AI agents
- [llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference
- [Skill](https://ui.pelagornis.com/ai-tools/skill/): refineui agent skill
- [Doctor](https://ui.pelagornis.com/ai-tools/doctor/): Read-only workspace diagnostics
- [MCP](https://ui.pelagornis.com/ai-tools/mcp/): @refineui/mcp server

## Optional

- [DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch DESIGN.md visual identity for coding agents
- [llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference for LLM context windows
- [GitHub](https://github.com/pelagornis/refineui): Source code and issue tracker