Component Registry

Install Bento UI components via CLI using the shadcn/ui-compatible registry

Component Registry

Bento UI components are distributed via a shadcn/ui-compatible registry, enabling easy installation and updates.

Quick Start

Using shadcn CLI

Install any component directly from our registry:

npx shadcn@latest add https://bento-ui.vercel.app/registry/components/glassmorphic-card.json

Using Bento UI CLI (Coming Soon)

npx bento-ui add glassmorphic-card

---

Available Components

All 14 primitives are available via the registry:

Component	Category	Complexity	Description
glassmorphic-card	Layout	Medium	Glassmorphic card with blur effects and composable subparts
masked-image	Media	Medium	Image container with gradient mask support
animated-grid	Layout	Medium	Grid with animated cells and radial mask
avatar-group	Display	Medium	Overlapping avatars with plus button
stat-card	Data	Low	Metrics display with value and label
circular-progress	Feedback	High	Circular progress rings with conic gradients
tooltip	Overlay	Medium	Glassmorphic tooltips (cursor, chart, default)
dot-indicator	Navigation	Low	Status dots and pagination
badge	Display	Low	Labels and tags with glassmorphic styling
icon-button	Input	Medium	Circular icon buttons
chart-bar	Data	Medium	Vertical bar charts
glow-button	Input	High	Animated glow button effect
button	Input	Low	Standard button component
card	Layout	Low	Basic card with subparts

---

Installation Methods

Method 1: Registry (Recommended)

Install components directly from the registry with automatic dependency resolution:

npx shadcn@latest add https://bento-ui.vercel.app/registry/components/stat-card.json

Benefits:

• ✅ Automatic dependency installation
• ✅ CSS variables included
• ✅ Registry dependencies resolved
• ✅ One command installation

Method 2: Manual Copy-Paste

For full control, copy components manually:

1. Browse components at /docs/components
2. Copy the source code from the documentation
3. Create components/ui/component-name.tsx
4. Install dependencies: bun add class-variance-authority clsx tailwind-merge
5. Add CSS variables to app/globals.css (listed in component docs)

Benefits:

• ✅ Full code ownership
• ✅ No CLI required
• ✅ Easy customization
• ✅ Transparent process

---

Registry Format

Each component's registry metadata includes:

1. Component Information

{
  "name": "glassmorphic-card",
  "type": "registry:ui",
  "description": "Glassmorphic card with blur effects..."
}

2. Dependencies

{
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": []
}

3. Source Code

{
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/glassmorphic-card.tsx",
      "content": "aW1wb3J0Li4u",  // base64 encoded
      "target": "components/ui/glassmorphic-card.tsx"
    }
  ]
}

4. CSS Variables

{
  "cssVars": {
    "dark": {
      "--radius-lg": "16px",
      "--shadow-1": "0px 32px 24px -16px rgba(0, 0, 0, 0.4)",
      "--neutral-2-5": "rgba(248, 248, 248, 0.05)"
    }
  }
}

5. Metadata

{
  "meta": {
    "category": "layout",
    "subcategory": "cards",
    "complexity": "medium",
    "composable": true,
    "accessible": true,
    "responsive": true
  }
}

---

Registry Endpoints

The registry is hosted at:

https://bento-ui.vercel.app/registry/

Index: /registry/index.json
Components: /registry/components/{name}.json

Example Endpoints

# Registry index (list all components)
curl https://bento-ui.vercel.app/registry/index.json

# Specific component
curl https://bento-ui.vercel.app/registry/components/glassmorphic-card.json

# Decode component source
curl https://bento-ui.vercel.app/registry/components/glassmorphic-card.json | \
  jq -r '.files[0].content' | base64 -d

---

Component Categories

Components are organized by category for easy discovery:

Layout

• glassmorphic-card - Glassmorphic card wrapper
• card - Basic card component
• animated-grid - Animated grid layout

Input

• glow-button - Animated glow button
• button - Standard button
• icon-button - Circular icon button

Display

• avatar-group - Overlapping avatars
• badge - Labels and tags

Data

• stat-card - Metrics display
• chart-bar - Bar charts

Media

• masked-image - Masked images

Feedback

• circular-progress - Progress rings

Navigation

• dot-indicator - Pagination dots

Overlay

• tooltip - Glassmorphic tooltips

---

Dependency Resolution

The registry automatically resolves dependencies:

NPM Dependencies

Installed automatically when you add a component:

• class-variance-authority - Type-safe variants
• clsx + tailwind-merge - className utilities
• @radix-ui/react-slot - Polymorphism support
• @radix-ui/react-tooltip - Tooltip primitive

Registry Dependencies

Some components depend on other components in the registry. These are installed automatically:

# Installing avatar-group will also install icon-button if needed
npx shadcn@latest add https://bento-ui.vercel.app/registry/components/avatar-group.json

---

Design Tokens

All components use CSS custom properties (design tokens). When you install a component, the required CSS variables are listed in the metadata.

Adding CSS Variables

Copy the CSS variables from the component's cssVars.dark object to your app/globals.css:

:root {
  /* Radius tokens */
  --radius-lg: 16px;
  --radius-xl: 32px;
  
  /* Shadow tokens */
  --shadow-1: 0px 32px 24px -16px rgba(0, 0, 0, 0.4);
  
  /* Color tokens */
  --neutral-2-5: rgba(248, 248, 248, 0.05);
  --ui-text-primary: rgba(248, 248, 248, 0.95);
}

See Design Tokens for the complete token reference.

---

Troubleshooting

Component not found

Ensure the component name is correct and matches the registry:

# Check available components
curl https://bento-ui.vercel.app/registry/index.json | jq '.components'

Missing dependencies

Install missing dependencies manually:

bun add class-variance-authority clsx tailwind-merge @radix-ui/react-slot

CSS variables not working

Ensure you've added the required CSS variables to app/globals.css. Check the component's metadata:

curl https://bento-ui.vercel.app/registry/components/component-name.json | jq '.cssVars.dark'

---

Contributing

Want to add your component to the registry?

1. Create your component in components/ui/
2. Follow components.build standards
3. Run bun run build:registry to generate metadata
4. Submit a pull request

See Contributing Guide for details.

---

Registry Specification

Bento UI registry follows:

• ✅ shadcn/ui registry format
• ✅ components.build specification
• ✅ Open-source distribution model
• ✅ Source code transparency

Version: 1.0.0
Format: JSON with base64-encoded source
Compatibility: shadcn CLI, custom CLIs