Installation

Learn how to install and integrate Franken UI in your projects.

Installation via CDN

1. Perfect for beginners, the simplest installation can be done using CDN.

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/css/core.min.css"
/>

2. Optionally, you can include a pre-built (~91.45 kB gzipped) Tailwind CSS utility classes to complement with Franken UI. These utility classes are pre-extracted from Tailwind CSS. If you find this too large, you can always switch to a proper build process.

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/css/utilities.min.css"
/>

The following utility classes are available:

Once you’re done, you may now proceed adding JavaScript.

Installation via NPM

Because Franken UI is both a Tailwind CSS and a Vite plugin, it can be included into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

Tailwind CSS v3

1. Install PostCSS and the latest version of Franken UI using NPM:

npm install postcss franken-ui@internal

2. Run the npx franken-ui init -p command.

npx franken-ui init -p

This command will automatically generate and configure both tailwindcss.config.js and postcss.config.cjs for you. If you already have a Tailwind CSS or PostCSS configuration in place, the command will refuse to create a new one. This ensures that your existing configuration isn’t accidentally overwritten.

If you have trouble running the command, you can always refer to the source code and grab the right configuration you need.

Tailwind CSS v4 (experimental)

1. Install Tailwind CSS in your project together with the latest version of Franken UI using NPM:

npm install franken-ui@internal

2. Manually configure your app.css file.

@import 'tailwindcss';

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-ring: hsl(var(--ring));

  --font-geist-sans: Geist Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
  --font-geist-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

@layer base {
  /* @import 'franken-ui/css/custom-palette.css'; */

  @import 'franken-ui/css/npf.css';
}

Once you’re done, you may now proceed adding JavaScript.