Setup guide

Installation

reframe/ui relies on Tailwind and shadcn/ui. Five steps and you are shipping.

Next.jsTailwind CSSTypeScriptshadcn/ui
1

Setup Next.js with Tailwind & TypeScript

Create a Next.js app with Tailwind and TypeScript. Return here after.

2

Setup shadcn/ui

Add shadcn/ui to your project. Use tweakcn to theme it.

Step 03

Install via shadcn CLI

Add the reframe namespace once, then install any component. Each component page also lists its own npm deps.

shadcn-namespace.shtsx
Next.js

Works out of the box. Add namespace, run add, import from your components folder.

Vite

Same CLI. Point aliases to your src dir, install deps with npm, paste and import.

Manual

Copy source from any component page, install its listed npm deps, import the demo.

Step 04

Copy the component

Paste the source into your project — you own the code, modify anything.

@/components/reframe-ui/text-shimmer.tsx
text-shimmer.tsxtsx
Step 05

Import in your app

Drop the demo in and watch it run — no config needed.

text-shimmer-demo.tsxtsx
© reframe/ui 2026Built by @thommysart