Get started — Vite

Five steps from a fresh Vite + React project to your first themed Oshon component on screen. Requires Node 18+ and Tailwind v4 (any package manager).

1. Create the Vite project

pnpm create vite@latest my-oshon-app -- --template react-ts
cd my-oshon-app
pnpm install

2. Add Tailwind v4

pnpm add -D tailwindcss @tailwindcss/vite

Update vite.config.ts to register the Tailwind plugin:

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. Install Oshon

pnpm add @oshon-ai/components @oshon-ai/tokens @oshon-ai/primitives

4. Wire the tokens

Replace the contents of src/index.css with the three Tailwind v4 imports in this exact order:

src/index.css

@import 'tailwindcss';
@import '@oshon-ai/tokens/css';
@import '@oshon-ai/tokens/tailwind';

/* your own styles go below */

5. Render a component

Replace src/App.tsx with:

src/App.tsx

import { ButtonHug } from '@oshon-ai/components';

export default function App() {
  return (
    <main style={{ padding: 32 }}>
      <h1>Oshon test</h1>
      <ButtonHug onClick={() => alert('hello Oshon')}>
        Click me
      </ButtonHug>
    </main>
  );
}

Run pnpm dev and open http://localhost:5173. The button should be teal (Oshon's default primary seed) with rounded corners.

Troubleshooting

Hit a wall? Most install issues are covered in Troubleshooting. The two most common with Vite:

Components render unstyled. Check that src/index.css is imported in src/main.tsx (`import './index.css'`) and that the three @import lines are in the order shown above.
"Tailwind v3 detected" warning. Vite templates ship with Tailwind v3 by default. Make sure you installed the v4 packages (tailwindcss@latest plus @tailwindcss/vite) — see Step 2.