Button
Trigger an action with seven variants, five sizes, and icon support
v14.3.1 · 32 components · MCP-compatible
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 · 2
Icon Button
A compact button for toolbar actions and tight UI surfaces
Form · 7
Field
Labeled text input with floating label, addons, and validation
Radio Group
Choose one option from a list — compact or full-width pill style
Checkbox
Toggle with checked, unchecked, and indeterminate states
Select
Dropdown picker built on Radix with full keyboard navigation
Switch
On/off toggle with three sizes and smooth animation
NativeSelect
Browser-native dropdown styled to match the rest of Arbor
Fieldset
Group related form controls with a legend and description
Overlay · 9
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.
Dialog
Centered modal with title, description, footer, and overlay scrim
Drawer
Sliding panel from any edge — mobile bottom sheets handled by default
AdaptiveModal
Renders a Drawer on mobile and a Dialog on desktop, automatically
Popover
Floating content anchored to a trigger
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
Dropdown Menu
Action menu with checkboxes, radios, submenus, and keyboard shortcuts
Navigation · 2
Link
Inline text link with size, color variants, and external-link icon
Tabs
Five tab styles: underline, pill, pill-subtle, segmented, segmented-pill
Data Display · 1
Avatar
User image with fallback initials, status badge, and group stacking
Badge · 1
Badge
Inline label — eight variants plus status, plan, and count badges
Layout · 4
Header Bar
Page header with title, tab bar, and toolbar actions
Actions
Group buttons into a toolbar with consistent spacing
Collapsible
Expand and collapse a region with smooth height animation
Divider
Horizontal or vertical separator with optional centered label
Feedback · 3
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
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