Gatsby

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

Prerequisites

Before you begin, make sure your app is using:

Gatsby 5.16 or higher
React 19.2.0 or higher
React DOM 19.2.0 or higher
TypeScript 5 or higher

Installation

Create a Gatsby app


pnpm create gatsby@latest

Add React and Typescript support


pnpm add react@latest react-dom@latest typescript

Install the package


pnpm add extraction-ui

Install peer dependencies

Tailwind CSS for styling:


pnpm add -D tailwindcss @tailwindcss/postcss postcss gatsby-plugin-postcss


/** gatsby-config.ts */
import type { GatsbyConfig } from "gatsby";
 
const config: GatsbyConfig = {
  plugins: ["gatsby-plugin-postcss"],
};
 
export default config;

Add Tailwind to your PostCSS config as well:


/** postcss.config.js */
module.exports = {
  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';

Create a gatsby-browser.js file at the root of your project if it doesn’t already exist and make sure the CSS file is imported:


/** gatsby-browser.js */
import './src/styles/globals.css';

Start using components

Import and use components in your project:


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