# SagUI

> React components with motion built in. Install with `npm install @sagui/ui`.

MCP server (read-only, no key): https://sagui-docs.vercel.app/api/mcp. Tools: list_components, search_components, get_component, get_install, get_tokens.

## Guides

- [Installation](/docs/installation): Install SagUI, set up Tailwind CSS, and render your first component.
- [Use with AI](/docs/ai): Connect your coding assistant to SagUI's MCP server, so it picks the right component and uses its real API.
- [Theming and tokens](/docs/theming): Semantic tokens, dark mode, and how to override them.
- [Motion](/docs/motion): How motion is built into every component, and how reduced motion is handled.
- [Accessibility](/docs/accessibility): The behavior every SagUI component shares.
- [Typography](/docs/typography): Typefaces, the type scale, and the semantic roles that set size, line height, weight and tracking together.
- [Radius](/docs/radius): A corner radius scale and the roles that decide which corner each surface gets.
- [Shadow and elevation](/docs/elevation): Five levels of elevation, the shadows that express them in light and dark themes, and how layers stack.

## Buttons

- [Button](/components/button/markdown): A clear, responsive action with a loading state, icons, and a label that morphs in place.
- [Action button](/components/action-button/markdown): A compact button for frequent toolbar actions.
- [Split button](/components/split-button/markdown): A primary action with a menu of nearby alternatives.
- [Button group](/components/button-group/markdown): Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
- [Floating button group](/components/floating-button-group/markdown): Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.
- [Expanding button group](/components/expanding-button-group/markdown): Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.
- [Copy button](/components/copy-button/markdown): Copy a value with immediate confirmation.
- [Confirm morph](/components/confirm-morph/markdown): A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

## Inputs

- [Input](/components/input/markdown): A single line field with clear labels and useful states.
- [Textarea](/components/textarea/markdown): A multiline field for notes, descriptions, and longer text.
- [Password field](/components/password-field/markdown): Capture sensitive text with a visible reveal control.
- [Password strength](/components/password-strength/markdown): Show how strong a new password is while it is typed.
- [Search field](/components/search-field/markdown): A recognizable search entry point with clear affordances.
- [Expanding search](/components/expanding-search/markdown): An icon that morphs into a search field with results beneath it.
- [Inline edit](/components/inline-edit/markdown): Rename in place: the text becomes a field without moving.

## Special inputs

- [Number field](/components/number-field/markdown): Enter a bounded number with clear increment controls.
- [Money input](/components/money-input/markdown): A currency field with live grouping, stable width, rolling digits, and minor-unit output.
- [Phone input](/components/phone-input/markdown): A phone field with a country picker, formatting as you type, and E.164 output.
- [Tag input](/components/tag-input/markdown): Turn short text values into removable tags.

## Selection controls

- [Checkbox](/components/checkbox/markdown): A binary choice with a precise, legible state.
- [Radio group](/components/radio-group/markdown): Choose one option from a visible set.
- [Radio cards](/components/radio-cards/markdown): Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
- [Select](/components/select/markdown): A compact choice field with a keyboard friendly menu.
- [Morph select](/components/morph-select/markdown): A select whose trigger grows into the list, with a gliding highlight and type-ahead.
- [Combobox](/components/combobox/markdown): Search and select from a list without leaving the field.
- [Multi-select](/components/multi-select/markdown): Select several values while keeping the field readable.
- [Switch](/components/switch/markdown): A tactile toggle for settings that take effect immediately.
- [Segmented control](/components/segmented-control/markdown): Switch between a small set of related views.
- [Chip group](/components/chip-group/markdown): Filter by a few facets with chips that morph as you pick them.

## Navigation

- [App shell](/components/app-shell/markdown): The frame of an application: a sidebar of navigation that folds into a rail, and a top bar for the page title, search and account.
- [Tabs](/components/tabs/markdown): Switch between related content in the same context.
- [Breadcrumb](/components/breadcrumb/markdown): Show where a page sits in a hierarchy.
- [Command palette](/components/command-palette/markdown): A complete keyboard driven action surface with search, grouped results, and shortcuts.
- [User menu](/components/user-menu/markdown): Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.

## Disclosure

- [Accordion](/components/accordion/markdown): Progressively reveal supporting information in place.

## Data display

- [Avatar](/components/avatar/markdown): A compact identity marker for people and accounts.
- [Avatar group](/components/avatar-group/markdown): Show a team or set of contributors in a small space.
- [Badge](/components/badge/markdown): A small label for status, category, or metadata.

## Charts

- [Line chart](/components/line-chart/markdown): A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
- [Bar chart](/components/bar-chart/markdown): Compare one measure across days and scrub any bar for its value.
- [Donut chart](/components/donut-chart/markdown): A donut whose arcs morph between datasets, with the active value rolling into the center.
- [Sparkline](/components/sparkline/markdown): Show a compact trend beside a value.
- [Gauge](/components/gauge/markdown): Show a value against a known range.
- [Streamgraph](/components/streamgraph/markdown): Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.
- [Brush chart](/components/brush-chart/markdown): A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
- [Waffle chart](/components/waffle-chart/markdown): A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.
- [Slope chart](/components/slope-chart/markdown): Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.
- [Activity heatmap](/components/activity-heatmap/markdown): See a year of activity at a glance, one square per day.
- [Ridgeline](/components/ridgeline/markdown): Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
- [Treemap](/components/treemap/markdown): A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.

## Tables and timeline

- [Sortable data table](/components/sortable-data-table/markdown): Compare structured records with sortable columns.
- [Timeline](/components/timeline/markdown): Follow what happened, newest first, grouped by day.

## Text effects

- [Text reveal](/components/text-reveal/markdown): Reveal a short piece of content with restrained motion.
- [In-view title](/components/in-view-title/markdown): Bring a section title in as it scrolls into view.
- [Text morph](/components/text-morph/markdown): Morph a label into its next state, letter by letter.
- [Text shimmer](/components/text-shimmer/markdown): Show ongoing work with a calm light across the words.

## Cards

- [Card](/components/card/markdown): A contained group of related content and actions.
- [Metric card](/components/metric-card/markdown): A compact summary for a number that needs context.
- [Empty state](/components/empty-state/markdown): A useful next step when there is nothing to show yet.
- [Animated counter](/components/animated-counter/markdown): Give changing totals a clear sense of movement.
- [Skeleton](/components/skeleton/markdown): Reserve space while content is still loading.

## Messages

- [Alert](/components/alert/markdown): A persistent message that helps people recover or continue.
- [Toast](/components/toast/markdown): Brief confirmation for a completed background action.
- [Notification center](/components/notification-center/markdown): A home for updates with read state, grouped information, and animated disclosure.

## Overlays

- [Dialog](/components/dialog/markdown): A focused surface for decisions that need attention.
- [Drawer](/components/drawer/markdown): A temporary side surface for focused work.
- [Bottom sheet](/components/bottom-sheet/markdown): A sheet that rests at a peek or full height and follows your finger.
- [Popover](/components/popover/markdown): A small anchored surface for contextual information.
- [Tooltip](/components/tooltip/markdown): Short supporting text for unfamiliar controls.