Willow Design System Registry

A modern, accessible component library built with React and Tailwind CSS. Fully compatible with shadcn/ui.

Easy Installation

Install components using the shadcn CLI or copy them directly into your project

npx shadcn@latest add willow/button

Customizable Themes

Multiple color themes and variants to match your brand identity

Primary

Danger

Warning

Info

16+ Components

Everything you need to build modern web applications

30Components

Quick Start

Get up and running with Willow Design System in minutes

1. Initialize shadcn in your project

npx shadcn@latest init

2. Add the Willow registry

// components.json
{
  "registries": [
    {
      "name": "willow",
      "url": "https://iridescent-brigadeiros-fe4174.netlify.app/api/registry"
    }
  ]
}

3. Install components

npx shadcn@latest add willow/card willow/button willow/input

Available Components

All components are built with accessibility and customization in mind

Core Components

Accordion

1 variant

Avatar

2 variants

Badge

1 variant

Button

6 variants

Card

5 variants

Chip

1 variant

Icon

1 variant

IconText

1 variant

List

1 variant

Modal

1 variant

Skeleton

1 variant

Tabs

6 variants

Tag

1 variant

Toast

1 variant

Tooltip

1 variant

Form Components

Checkbox

1 variant

FormCard

1 variant

FormField

1 variant

Input

1 variant

Label

1 variant

Select

1 variant

SimpleForm

1 variant

Switch

1 variant

Textarea

1 variant

Special Components

ErrorBoundary

1 variant

FancyButton

1 variant

GradientBG

1 variant

Highlight

1 variant

InfoCard

1 variant

Logo

1 variant

Ready to get started?

API Endpoints

Access the component registry programmatically

Full Registry

GET /api/registry

Individual Component

GET /api/registry/[component-name]