quick start

Everything you need to know about quick start in getting started. Copy, paste, and customize.

1. The Workflow

SnapJSX is designed for speed. Our workflow eliminates the friction of traditional component libraries.

Identify

Browse the sidebar to find a component that fits your needs. We provide multiple variants for most common UI patterns.

Inspect

Use the 'View Code' toggle to examine the implementation. We provide both JSX and raw HTML/Tailwind versions.

Integrate

Copy the code and paste it directly into your local component directory. We recommend `src/components/ui`.

2. Folder Structure

We recommend a flat structure for your UI components to keep things organized and easy to find.

text

src/
├── components/
│   ├── ui/
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── modal.tsx
│   └── layout/
│       ├── sidebar.tsx
│       └── navbar.tsx
├── lib/
│   └── utils.ts
└── app/
    └── layout.tsx

3. First Component

Let's create your first button. Paste this code into `src/components/ui/button.tsx`.

typescript

export function Button({ children, className = "", ...props }) {
  return (
    <button 
      className={`px-4 py-2 bg-primary text-white rounded-lg transition-all active:scale-95 ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}

Next Steps

Explore the Loaders section for async states

Setup your global design tokens in globals.css

Join our community on GitHub for updates