Installation

Peer dependencies, the styles entry, fonts, subpath bundles, and installing components via the shadcn registry.

Requirements

React 19 and react-dom 19
Tailwind CSS v4
A bundler that understands CSS @import and the exports field (Next.js, Vite, etc.)

Install the package

npm install @saasflare/ui

pnpm add @saasflare/ui

yarn add @saasflare/ui

bun add @saasflare/ui

Peer dependencies

These install alongside @saasflare/ui and power the core experience:

npm install motion next-themes tailwindcss

motion (formerly Framer Motion) drives the animated-by-default components via motion/react. next-themes backs light/dark switching. Tailwind v4 consumes the design tokens through the styles entry.

Optional peers (feature-specific)

Only needed if you use the matching components — your package manager will warn, not error, when they're absent:

Peer	Powers
`recharts`	`Chart`, `SparkChart`
`embla-carousel-react`	`Carousel`
`react-hook-form` + `@hookform/resolvers` + `zod`	`Form`
`react-day-picker` + `date-fns`	`Calendar`, `DatePicker`
`input-otp`	`InputOTP`
`vaul`	`Drawer`
`react-resizable-panels`	`Resizable`

Styles, provider, and fonts

globals.css

@import "@saasflare/ui/styles";

app/layout.tsx

import { SaasflareShell } from "@saasflare/ui"
import { fontVariables } from "@saasflare/ui/fonts/default"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <SaasflareShell className={fontVariables}>{children}</SaasflareShell>
}

Font presets ship as subpaths — apply fontVariables to <html>: ./fonts/default, ./fonts/editorial, ./fonts/geometric, ./fonts/rounded, ./fonts/distinctive, ./fonts/neutral.

Subpath bundles

Most components import straight from the main barrel:

import { Button, Dialog, Card } from "@saasflare/ui"

A handful of peer-heavy components also expose a dedicated subpath, so apps that don't use them never pull the peer into their graph:

import { Chart } from "@saasflare/ui/chart"
import { Carousel } from "@saasflare/ui/carousel"
import { Calendar } from "@saasflare/ui/calendar"
import { Command } from "@saasflare/ui/command"
import { Drawer } from "@saasflare/ui/drawer"
import { InputOTP } from "@saasflare/ui/input-otp"
import { Resizable } from "@saasflare/ui/resizable"

Install via the shadcn registry

Every component is also installable as source through the shadcn CLI — handy when you want to vendor and tweak a component instead of importing it:

npx shadcn@latest add "https://ui.saasflare.io/r/button.json"

Swap button for any component name. The registry index lives at /registry.json.

Next steps

Theming — palettes and the customization axes
AI: MCP server & llms.txt

On this page