Getting Started

Synapse UI is a collection of copy-paste React components built with Tailwind CSS and shadcn/ui primitives.

Installation

You can install Synapse UI components either using the shadcn CLI or manually.

CLI Installation (Recommended)

Add any component to your project dynamically via the shadcn CLI by pointing it to the component's registry URL:

npx shadcn@latest add https://synapse-ui.vercel.app/r/button-01.json

(Make sure to replace http://localhost:3000 with the domain Synapse UI is hosted on, and button-01.json with the component name you wish to install).

Manual Installation

To install manually:

1. Browse to the component page.
2. Select the Code tab to copy the full, entire component code.
3. Paste it into your project under src/components/synapse-ui-components/.
4. Ensure your project has the required dependencies (such as lucide-react, motion, etc.) specified at the top of the copied code.

Required Base Dependencies

Make sure your React project is configured with:

• React 19+
• Tailwind CSS v4
• shadcn/ui primitives (such as Button, Card, Input, etc.)

Project Structure

src/components/synapse-ui-components/
├── ai-inputs/     # AI chat interface components
├── alerts/        # Alert and notification layouts
├── buttons/       # Animated button variants
├── cards/         # Card layouts and compositions
├── FAQs/          # FAQ accordion and list patterns
├── inputs/        # Form input variants
├── lists/         # List and menu layouts
├── pricings/      # Pricing table components
├── texts/         # Typography and text animations
└── blocks/        # Full-page block compositions

Browse Components

Use the sidebar to explore each category, or press ⌘K to search the docs.