Getting Started

This guide will help you get up and running with the Vanilla Design System.

Prerequisites

Node.js 18.0 or later
React 18.0 or later
A package manager (pnpm, npm, or yarn)

Installation

Install the required packages:

pnpm add @beauginbey/vanilla-components @beauginbey/vanilla-tokens @beauginbey/vanilla-colors

Setup

1. Import Global Styles

Import the global styles and colors in your app's entry point:

// _app.tsx or App.tsx
import '@beauginbey/vanilla-components/styles.css';
import '@beauginbey/vanilla-colors/css';

2. Apply Theme

Apply the theme class to your application root:

import { theme } from '@beauginbey/vanilla-components';
 
function App() {
  return (
    <div className={theme}>
      {/* Your app content */}
    </div>
  );
}

3. Dark Mode (Optional)

To enable dark mode, add the .dark class to your document:

// Enable dark mode
document.documentElement.classList.add('dark');
 
// Or toggle based on user preference
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

4. Use Components

Start using the components in your application:

import { Button, Box, Text } from '@beauginbey/vanilla-components';
 
function MyComponent() {
  return (
    <Box p={4}>
      <Text as="h1" size="2xl" weight="bold">
        Hello Vanilla!
      </Text>
      <Button variant="solid" onClick={() => alert('Clicked!')}>
        Click me
      </Button>
    </Box>
  );
}

TypeScript Configuration

The design system is built with TypeScript. For the best experience, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Next.js Setup

If you're using Next.js, you'll need to configure vanilla-extract:

Install the Next.js plugin:

pnpm add -D @vanilla-extract/next-plugin

Update your next.config.js:

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
 
module.exports = withVanillaExtract({
  // Your Next.js config
});

Vite Setup

For Vite projects:

Install the Vite plugin:

pnpm add -D @vanilla-extract/vite-plugin

Update your vite.config.ts:

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
export default {
  plugins: [vanillaExtractPlugin()]
};

Introduction Components