Installation

Get started with Venator in a new or existing React project.

Requirements

Node.js >= 18
React 18

Venator is optimised for use with Next.js 14+ (App Router).

Install packages

Terminal

npm install @venator-ui/ui @venator-ui/patterns

@venator-ui/tokens is included as a transitive dependency. You can also install it directly if you need advanced access — for example, to use the Tailwind preset or design tokens in your own config.

Configure Tailwind

tailwind.config.js

const { venatorPreset } = require('@venator-ui/tokens');

module.exports = {
darkMode: 'class',
presets: [venatorPreset],
content: [
  './src/**/*.{ts,tsx,md,mdx}',
  './node_modules/@venator-ui/ui/dist/**/*.{js,mjs}',
  './node_modules/@venator-ui/patterns/dist/**/*.{js,mjs}',
],
theme: { extend: {} },
plugins: [],
};

Add ToastProvider

app/layout.tsx

import { ToastProvider } from '@venator-ui/ui';

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
  <html lang="en">
    <body>
      <ToastProvider>{children}</ToastProvider>
    </body>
  </html>
);
}

First component

page.tsx

import { Button, Card, CardContent, CardHeader } from '@venator-ui/ui';

export default function Page() {
return (
  <Card>
    <CardHeader title="Welcome to Venator" description="Start building." />
    <CardContent className="mt-4">
      <Button variant="primary">Get started</Button>
    </CardContent>
  </Card>
);
}