Button
Trigger an action with seven variants, five sizes, and icon support
Production-ready React components from Linktree's design system. Works with Claude, Cursor, and VS Code.
Typography, color, and spacing — built in so every component stays on-brand
Set up in under a minute with any AI assistant
@arbor to your components.jsonDrop this snippet into your project's components.json to enable short install commands like @arbor/button.
{
"registries": {
"@arbor": "https://arbor.linktr.ee/r/{name}.json"
}
}
Run it yourself:
npx shadcn@latest add @arbor/button
Or ask your AI assistant:
Requires an MCP-aware assistant. Drop this into .mcp.json at your project root:
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "shadcn@latest", "mcp"]
}
}
}
Browse the full library — types, tokens, and accessibility built in
Trigger an action with seven variants, five sizes, and icon support
A compact button for toolbar actions and tight UI surfaces
Labeled text input with floating label, addons, and validation
Dropzone surface for selecting files to upload. A dashed drop target with a cloud-upload glyph, click and keyboard activation, drag-and-drop, plus error and disabled states. Use it as the upload trigger; compose selected-file lists and progress above it.
Single-select controls built on Radix UI — the canonical Radio (control) and RadioItem (control + label + description), plus RadioButton selectable surfaces (compact, pill, squircle, card).
Toggle with checked, unchecked, and indeterminate states
Dropdown picker built on Radix with full keyboard navigation
On/off toggle with compact and neutral options and smooth animation
Browser-native dropdown styled to match the rest of Arbor
Group related form controls with a legend and description
Segmented one-time-password (OTP) input built on input-otp. Per-slot boxes with auto-advance, paste distribution, a blinking caret, and one-time-code autofill. Composes with Field for label, error state, and message.
Binary-confirmation modal (Cancel/Delete, Cancel/OK, Leave/Stay). Enforces two-button footer with no close button. Built on @radix-ui/react-alert-dialog.
Sliding panel from any edge — mobile bottom sheets handled by default
Renders a Drawer on mobile and a Dialog on desktop, automatically
Floating content anchored to a trigger
Click-triggered tooltip for onboarding, hints, and feature education
Hover-only label with inverse styling and configurable placement
Translucent scrim that dims content behind a modal or drawer
A floating panel of contextual actions opened from a trigger. Built on Radix UI with leading/trailing icon slots, an optional description line, section headings, checkbox and radio items, submenus, keyboard-shortcut hints, and a destructive variant. Supersedes DropdownMenu.
Inline text link with size, color variants, and external-link icon
Five tab styles: underline, pill, pill-subtle, segmented, segmented-pill
User image with fallback initials, status badge, and group stacking
Inline label — eight variants plus status, plan, and count badges
Communicates presence, activity state, or a count. Renders as a dot for binary states (active/online/error) or a count bubble for notification quantities, with a custom-color escape hatch for off-system use.
Layout container that pairs exactly two related action buttons (e.g. Cancel / Save) with shared sizing and an equal-width, auto-width, or stacked layout. Place the primary action last in a row, or first (top) when stacked; caps at two to reduce cognitive load.
Page header with title, tab bar, and toolbar actions
Expand and collapse a region with smooth height animation
Horizontal or vertical separator with optional centered label
Pulse-animated placeholder shape for loading states
Inline status message — info, success, warning, error, or neutral
Brief notification that pops up with optional action buttons
Set typography by variant and semantic element in one prop
173 curated Phosphor icons with size, weight, and color control
242 service logos for representing third-party app integrations