Quick start
Add Keyframery to a shadcn/ui app in three steps. Next.js, Vite and React Router all work.
You need a project with shadcn/ui set up, so components.json exists. Base UI and Radix both work.
Register Keyframery and install it
npx shadcn registry add "@keyframery=https://keyframery.com/r/{name}.json"
npx shadcn add @keyframery/cutsThe first command adds Keyframery's registry to components.json, once per project. The second copies components/keyframery/cuts.tsx, its stylesheet and a small engine in lib/keyframery/ into your project. No npm packages are added.
You should see "@keyframery" under registries in components.json, and a new components/keyframery/ folder.
Render <Cuts /> once, at the root
import { Cuts } from "@/components/keyframery/cuts"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Cuts />
</body>
</html>
)
}You should see a data-kf attribute on the <html> element in your browser's dev tools. <Cuts /> sets it while it runs.
Open a dialog
Open any dialog in your app.
You should see it grow out of the button you pressed, and close back into it. Tabs now slide, sheets push the page back, and toasts fly from the button that made them.
If the dialog still pops into the middle
- Make sure
<Cuts />is rendered once, in the root layout or entry file. - Check that your dialog's content element has
data-slot="dialog-content". Components added by shadcn CLI 3 and later have it; older copies don't. Runnpx shadcn add dialogagain to update yours. - If the CLI answered
Unknown registry "@keyframery", run the first command of step 1 again, or add the registry tocomponents.jsonby hand:
{
"registries": {
"@keyframery": "https://keyframery.com/r/{name}.json"
}
}Next
- See what's automatic now that
<Cuts />is running. - Animate lists, numbers and statuses, loading states and cards that open into a page. Each one installs by name, for example
npx shadcn add @keyframery/list-cut. - To try the layer without registering first,
npx shadcn add https://keyframery.com/r/cuts.jsoninstalls it by URL. That works forcutsonly, because the other components depend on it.