Installation

Get Extraction UI up and running in your project with a few simple steps.

Prerequisites

Before you begin, make sure you have:

Node.js 18.0.0 or higher
React 19.2.0 or higher
React DOM 19.2.0 or higher

Installation

Install the package


pnpm add extraction-ui

Install peer dependencies

Tailwind CSS for styling:


pnpm add -D tailwindcss @tailwindcss/postcss postcss

Add Tailwind to your PostCSS config as well


/** postcss.config.mjs */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

For more details on setting up Tailwind CSS, refer to the Tailwind CSS Installation Guide .

Import styles

Add the Extraction UI styles to your main CSS file:


/** main.css */
@import 'tailwindcss';
@import 'extraction-ui/styles';


/** app/layout.tsx */
import 'main.css';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <body>{children}</body>
    </html>
  );
}

Start using components

Import and use components in your project:


import { Button, Card } from 'extraction-ui';
 
export default function Home() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome to Extraction UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Button className='mbs-4'>Submit</Button>
      </Card.Content>
    </Card>
  );
}

Next Steps

Now that you have Extraction UI installed, explore:

Components

Library - Browse all available components
Customize - Understand how to customize the look of components
Composition - Understand how to compose components together

Theming

Palettes - Browse the color palettes availables
Variants - Learn how to create and use component variants for different styles
Customizing - Learn how to customize the colors to match your brand
Adding New - Add new colors into your app theme
Tonal - Understand how the tonal color work
Color Mode - Implement light and dark mode support in your application

Other

Options - Configure global options for Extraction UI