Get started — Remix

Five steps to ship Oshon in a Remix project (works for both the classic Remix CLI and Vite-powered Remix templates). Requires Node 18+ and Tailwind v4.

1. Create the Remix project

pnpm create remix@latest my-oshon-app
cd my-oshon-app
pnpm install

Accept the prompts (TypeScript: yes; deploy target: any). Most Remix templates land on a Vite setup by default.

2. Add Tailwind v4

pnpm add -D tailwindcss @tailwindcss/vite

vite.config.ts

import { defineConfig } from 'vite';
import { vitePlugin as remix } from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';
import tailwindcss from '@tailwindcss/vite';

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

3. Install Oshon

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

4. Wire the tokens

Create app/styles/tailwind.css with the three imports:

app/styles/tailwind.css

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

Wire it into the root via app/root.tsx:

app/root.tsx

import tailwindStyles from './styles/tailwind.css?url';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: tailwindStyles },
];

5. Render a component

Update app/routes/_index.tsx:

app/routes/_index.tsx

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

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

Run pnpm dev and open the dev URL. You should see a teal Oshon button.

Issues? See Troubleshooting.