Installation

Install framingui packages with your preferred package manager.

Packages

Package	Description
@framingui/core	Token generation, theme parsing, OKLCH utilities
@framingui/ui	30+ React components with theme support
@framingui/tokens	Raw design tokens (colors, typography, spacing)
@framingui/mcp-server	MCP server for AI tool integration

Quick Install (Recommended)

Use the MCP init command to automatically set up everything:

npx @framingui/mcp-server init

Manual Installation

npm

npm install @framingui/ui @framingui/core

pnpm

pnpm add @framingui/ui @framingui/core

yarn

yarn add @framingui/ui @framingui/core

Tailwind CSS Setup

Add FramingUI to your Tailwind config:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './node_modules/@framingui/ui/**/*.{js,ts,jsx,tsx}',
  ],
  plugins: [
    require('tailwindcss-animate'),
  ],
};

export default config;

Import Styles

Add the FramingUI styles to your global CSS:

/* globals.css */
@import '@framingui/ui/styles';

Peer Dependencies

@framingui/ui requires these peer dependencies:

react >= 18.0.0
react-dom >= 18.0.0
tailwind-merge >= 2.0.0
class-variance-authority >= 0.7.0
clsx >= 2.0.0
lucide-react >= 0.400.0