Installation

Framebrick UI components install like shadcn/ui components: the files land in your project, and you own them.

1
Start from a shadcn project
Any Next.js (or React + Tailwind CSS v4) project with shadcn/ui initialised works. New project:
```
npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init
```
2
Add a component
Each component page has its command. It adds the file, its npm packages (usually just Motion) and cn():
```
npx shadcn@latest add https://framebrick.co/r/spring-button.json
```
3
Optional: register the namespace
Add Framebrick to components.json to install with a short name — npx shadcn@latest add @framebrick/spring-button:
```
{
  "registries": {
    "@framebrick": "https://framebrick.co/r/{name}.json"
  }
}
```
4
Theme it
Components only use the standard shadcn variables (background, foreground, primary, muted, border, ring…), so they follow your theme and dark mode automatically. The motion is what makes them ours.

Be the first to know

One short email when we release a template or a free component. No spam — unsubscribe anytime.

We use your email only for Framebrick updates. Privacy policy

Start from a shadcn project