@refinest/ui-shadcn

Default UI kit for refinest, built on shadcn/ui primitives + Tailwind CSS.

Install

pnpm add @refinest/ui-shadcn @refinest/core @refinest/react @refinest/field-types
pnpm add -D tailwindcss
# plus your bundler's Tailwind v4 plugin — see "Tailwind setup" below

Requires Tailwind v4 (tailwindcss: ^4, declared as a peer dependency) — this package has no v3 build.

Tailwind setup

One import, before your own CSS rules:

@import '@refinest/ui-shadcn/styles.css';

That pulls in Tailwind itself, tw-animate-css (Radix overlay animations), the design tokens, the token→utility mapping, the dark variant, the pinned --font-sans and named-size line-heights, the base layer (border colours, background/foreground, button cursor), and the standard html { font-size: 16px } root — nothing else to configure. There is no tailwind.config.ts, no content array, and no preset: the package declares its own scan of its compiled output, so its class names reach your build without you listing its dist folder anywhere.

The standard 16px root keeps mobile editable text at its native size. The shared Input and Textarea use text-base (16px) on mobile, then md:text-sm (14px) from the medium breakpoint upward for compact desktop controls. This is a responsive control contract, not a global app rescale.

That import alone doesn't run Tailwind, though — you still need Tailwind v4's build plugin for your bundler, installed as its own devDependency:

• Next: pnpm add -D @tailwindcss/postcss, wired into postcss.config.cjs
• Vite: pnpm add -D @tailwindcss/vite, wired into vite.config.ts; no PostCSS config needed
• Anything else: follow Tailwind's own install docs for your bundler, then add the @import above to your stylesheet

→ docs/theming.md has the full setup, how to override a token, and the reasoning behind the base-layer rules and the --destructive colours. apps/playground (Next) and examples/vite (Vite) are working examples to copy from.

What's included

• Layout: AppLayout, Sidebar, Breadcrumbs
• Auth: LoginForm
• Resource views: ResourceList, ResourceShow, ResourceEdit, ResourceCreate
• Field renderers: text, number, boolean, date, enum, textarea (display + form input)
• Actions: ActionButton, BulkActionToolbar (wrap @refinest/react useAction)
• Notifications: Toaster + NotificationProvider (Sonner)
• ModalAdapter: dispatch-driven modals
• Vendored shadcn primitives: Button, Input, Label, Form, Table, Card, Dialog, Sheet, Select, Checkbox, Textarea, Badge

License

MIT