Next.js

This guide is specific to Next.js. For official framework documentation, visit the Next.js Documentation .

Prerequisites

Before you begin, make sure your app is using:

Next.js 15 or higher
React 19.2.0 or higher
React DOM 19.2.0 or higher
TypeScript 5 or higher

Installation

Create a Next.js app


pnpm create next-app@latest my-app --ts

Install the package


pnpm add extraction-ui

Install peer dependencies

Add 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 in `app/globals.css`

Create a global stylesheet and add the Extraction UI styles:


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

Make sure the CSS file is imported in your entry point:


/** app/layout.tsx */
import './globals.css';
 
export default function RootLayout({ 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 Page() {
  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>
  );
}