Introduction

What is Venator?

Venator is a React + TypeScript UI system organized in three layers.

• @venator-ui/ui — accessible component primitives built on design tokens
• @venator-ui/patterns — structural layout compositions for real application screens
• @venator-ui/archetypes — complete application scaffolds deployed via CLI and owned by the developer

The CLI deploys archetypes and patterns directly into your project — no runtime dependency, no lock-in.

Three layers

1. @venator-ui/ui — UI primitives Accessible, composable component primitives built on Tailwind CSS and design tokens.

2. @venator-ui/patterns — Structural patterns Reusable layout abstractions like DashboardLayout, PageHeader, and ModuleGrid.

3. @venator-ui/archetypes — Application architectures Complete project scaffolds deployed via CLI. Once deployed, the code is yours to modify.

Quick start

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

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

export function Example() {
return (
  <Card>
    <CardContent>
      <Button variant="primary">Get started</Button>
    </CardContent>
  </Card>
);
}