Button
Trigger an action with seven variants, five sizes, and icon support
v29.3.0 · 43 components · 38 Code Connect files
Linktree components,
one prompt away
Production-ready React components from Linktree's design system. Works with Claude, Cursor, and VS Code.
Built from Linktree's visual identity
Typography, color, and spacing — built in so every component stays on-brand
Get started
Set up in under a minute with any AI assistant
1
Add
@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"
}
}2
Install a component
Run it yourself:
npx shadcn@latest add @arbor/buttonOr ask your AI assistant:
"Add the @arbor/button component"
Requires an MCP-aware assistant. Drop this into .mcp.json at your project root:
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "shadcn@latest", "mcp"]
}
}
}Components
Browse the full library — types, tokens, and accessibility built in
Button · 3
Icon Button
A compact button for toolbar actions and tight UI surfaces
Toggle
An icon-only, binary pressable control (button with aria-pressed) rendered as a switch-shaped sliding pill. Two icons show the off/on states of one concept and the thumb slides over the active one. For toolbar modes and binary view switches — not form settings (use Switch) or picking one of several labeled views (use SegmentedControl).
Form · 13
Field
Labeled text input with floating label, addons, and validation
File Input
File upload 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.
File Input Item
Selected-file row composed above FileInput. Shows the file name with middle truncation that keeps the extension visible, secondary metadata, and idle / loading / error states with a trailing action slot, optional thumbnail preview, and a drag-handle affordance.
Radio
Single-select controls built on Radix UI — the canonical Radio (control) and RadioItem (control + label + description), plus RadioButton selectable surfaces (compact, pill, squircle, card).
Checkbox
Toggle with checked, unchecked, and indeterminate states
Select
Dropdown picker built on Radix with full keyboard navigation
Combobox
Searchable selection built on Base UI — a text input that filters an option list and keeps a persistent value. Single mode fills the input; multiple mode renders selections as dismissible Chips. Composes with Field for label, error state, and layout.
Search Bar
A search-specific text input for filtering, querying, or navigating content in place — a named ergonomic recipe over Field with a leading magnifying-glass, an optional clear (×) button, and Escape-to-clear. No suggestion dropdown (use Combobox for a persistent value, or SearchBar + an anchored Menu to navigate) and no error state (surface "No results" in the results region).
Switch
On/off toggle with compact and neutral options and smooth animation
NativeSelect
Browser-native dropdown styled to match the rest of Arbor
Fieldset
Group related form controls with a legend and description
One-Time Password Field
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.
ColorField
A hex color input with a swatch preview that opens a preset picker. Composes Field, so it inherits the Field emphasis axis, states, and label wiring.
Overlay · 6
Alert Dialog
Binary-confirmation modal (Cancel/Delete, Cancel/OK, Leave/Stay). Enforces two-button footer with no close button. Built on @radix-ui/react-alert-dialog.
AdaptiveModal
Renders a Drawer on mobile and a Dialog on desktop, automatically
RichTooltip
Click-triggered tooltip for onboarding, hints, and feature education
Tooltip
Hover-only label with inverse styling and configurable placement
Backdrop
Translucent scrim that dims content behind a modal or drawer
Menu
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. The canonical Arbor menu surface.
Navigation · 4
Link
Inline text link with size, color variants, and external-link icon
Tabs
Five tab styles: underline, pill, pill-subtle, segmented, segmented-pill
Segmented Control
Compact inline control for switching between mutually exclusive options — a view or mode toggle with a sliding selected pill. Reach for Tabs with variant="segmented" instead when the segmented look has to wrap real tab panels; SegmentedControl carries no tab semantics of its own.
Sidebar
Persistent, collapsible app-shell navigation column with nested menus, icon-rail collapsing, tooltips, and an automatic off-canvas panel on mobile. Ships the Sheet panel it uses for that mobile branch — Sheet is Sidebar's internal implementation, not a component to reach for on its own.
Data Display · 2
Icon List
Display-only vertical list of icon-led rows: a circular icon medallion, a bold label, and an optional description, with an optional connector for a lightweight timeline. Not interactive — for clickable or step-state rows, use a different component; for columnar data, use a table.
Avatar
User image with fallback initials, status badge, and group stacking
Badge · 3
Badge
Inline label — eight variants plus status, plan, and count badges
Indicator Badge
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.
Chip
Interactive compact control for filters and dismissible tags. Toggle mode renders an aria-pressed filter pill; dismissible mode adds a trailing remove button. For read-only metadata, use Badge.
Layout · 4
Button Group
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.
Header Bar
Page header with title, tab bar, and toolbar actions
Collapsible
Expand and collapse a region with smooth height animation
Divider
Horizontal or vertical separator with optional centered label
Feedback · 4
Skeleton
Pulse-animated placeholder shape for loading states
Alert
Inline status message — info, success, warning, error, or neutral
Toast
Brief notification that pops up with optional action buttons
ProgressBar
Determinate linear progress indicator — a pill track with a fill whose width is the completion percentage. For measurable advancement toward a known end (upload, multi-step setup, quota). Not for indeterminate waits, where a Skeleton or spinner is the honest signal.
Typography · 1
Text
Set typography by variant and semantic element in one prop
Icons · 2
Icons
173 curated Phosphor icons with size, weight, and color control
AppIcon
242 service logos for representing third-party app integrations
Display · 1
ColorSwatch
A named preview of a single color. Exposes role="img" with a generated or supplied accessible name, so the color is never conveyed by color alone.