Astro

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

Prerequisites

Before you begin, make sure your app is using:

Astro 5 or higher
React 19.2.0 or higher
React DOM 19.2.0 or higher
TypeScript 5 or higher

Installation

Create an Astro app


pnpm create astro@latest

Add React and Typescript support


pnpm add react react-dom typescript
pnpm add -D @astrojs/react

Make sure the astro config file is updated as well:


/** astro.config.mjs */
import { defineConfig } from 'astro/config';
 
import react from '@astrojs/react';
 
export default defineConfig({
  integrations: [react()],
});

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 in a global stylesheet

Create a global stylesheet and add the Extraction UI styles:


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

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


---
/** src/pages/index.astro */
import '../styles/globals.css';
---
 
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width' />
  </head>
  <body>...</body>
</html>

Start using components

Import and use components in your project:


---
/** src/pages/index.astro */
import { Button, Card } from 'extraction-ui';
---
 
<html lang='en'>
  <head>...</head>
  <body>
    <Card>
      <Card.Header>
        <Card.Title>Welcome to Extraction UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Button className='mbs-4'>Submit</Button>
      </Card.Content>
    </Card>
  </body>
</html>

Hydrate interactive components when needed

For components that rely on client-side interactivity, add an Astro client directive:


<SomeInteractiveComponent client:load />