TanStack

This guide is specific to TanStack Start. For official framework documentation, visit the TanStack Start Documentation .

Prerequisites

Before you begin, make sure your app is using:

TanStack Start latest version
React 19 or higher
React DOM 19.2.0 or higher
TypeScript 5 or higher

Installation

Create a TanStack Start app


pnpm create @tanstack/start

Install the package


pnpm add extraction-ui

Install peer dependencies

Tailwind CSS for styling:


pnpm add -D tailwindcss @tailwindcss/vite

Add Tailwind to your Vite configuration:


/** vite.config.ts */
import { defineConfig } from 'vite';
 
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [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 a global stylesheet

Create a global stylesheet and add the Extraction UI styles:


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

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


/** app/routes/__root.tsx */
import '../styles.css';

Start using components

Import and use components in your routes:


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