Documentation

Better Components are distributed as a shadcn registry. There is no package to depend on — the CLI copies a component's source straight into your project, so you own and can edit every line.

Installation

Start from a shadcn-ready project

You need a React app (Next.js, Vite, …) with Tailwind CSS v4 and shadcn initialised. If you haven't already:

npx shadcn@latest init

Add a component

Point the CLI straight at the component's URL — no config needed. This is the command shown on every component page:

npx shadcn@latest add https://better-components-alpha.vercel.app/r/static-button.json

Prefer a short name? Register the @bettercomp namespace once in your components.json:

{
  "registries": {
    "@bettercomp": "https://better-components-alpha.vercel.app/r/{name}.json"
  }
}

…then install by name:

npx shadcn@latest add @bettercomp/static-button

Either way the CLI writes the file to components/better/ and installs its npm dependencies (e.g. motion).

Use it

Import and drop it in — then tweak the props:

import { StaticButton } from "@/components/better/static-button"

export function Example() {
  return <StaticButton variant="primary">Buy</StaticButton>
}

Each component page has a live Playground so you can dial in the props visually and copy the exact code.

Manual install (copy & paste)

Prefer not to use the CLI? Open any component, hover the dock in the bottom-right, and choose View code. The Manual tab is the full, syntax-highlighted source — paste it into components/better/<name>.tsx and install the dependencies listed on the page. The Auto tab is a ready-to-paste usage snippet.

Browse the library

19 components across UI, Typography, Stop Motion, Loaders, Carousel, Mouse, and the Animate editor.

Explore components