Vite

This guide is specific to Vite with React. For official framework documentation, visit the Vite Documentation .

Prerequisites

Before you begin, make sure your app is using:

Vite 6 or higher
React 19.2.0 or higher
React DOM 19.2.0 or higher
TypeScript 5 or higher

Installation

Create a Vite app


pnpm create vite@latest --template react-ts

Install the package


pnpm add extraction-ui

Install peer dependencies

Tailwind CSS for styling:


pnpm add -D tailwindcss @tailwindcss/vite

Add the Tailwind plugin to your Vite config:


/** vite.config.ts */
import { defineConfig } from 'vite';
 
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

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

Configure SSR

Extraction UI ships component-level CSS imports. Configure Vite to bundle the package during SSR so the CSS is processed correctly.


/** vite.config.ts */
import { defineConfig } from 'vite';
 
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
  ssr: {
    noExternal: ['extraction-ui'],
  },
});

Import styles in `src/index.css`

Create a global stylesheet and add the Extraction UI styles:


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

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


/** src/main.tsx */
import './index.css';

Start using components

Import and use components in your project:


/** src/app.tsx */
import { Button, Card } from 'extraction-ui';
 
export default function App() {
  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>
  );
}