# Vibn AI Templates
A small, themable starter kit for building modern SaaS UIs. Pure React + CSS variables — no build step, no dependencies. Designed to be copy-pasted into any project.
## What's in it
- **`tokens.css`** — Every color, radius, shadow, and type token, exposed as CSS custom properties. Four themes ship out of the box:
- `.theme-minimal` — soft warm light (Linear / Notion school)
- `.theme-dark` — black-and-white surface (Vercel / Stripe school)
- `.theme-glass` — aurora gradient + frosted glass
- `.theme-editorial` — paper, serif display, hairline rules
- **`icons.jsx`** — A small Tabler-style stroke icon set (``) plus a `` brand glyph.
- **`components.jsx`** — Atoms + composites. Every visual property reads from a CSS variable:
- **Forms** · `Button`, `IconButton`, `Field`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `FieldGroup`
- **Containers** · `Card`, `CardHeader`, `Divider`, `Modal`, `Banner`
- **Display** · `Badge` (tones: neutral / accent / success / warn / danger / info), `Avatar`, `AvatarStack`, `Tabs`, `Table`, `Spinner`, `KBD`
- **`shells.jsx`** — Page-level layouts:
- **In-product** · `SidebarShell`, `TopbarShell`, `RailShell`
- **Auth** · `AuthCenteredShell`, `AuthSplitShell`, `AuthGlassShell`
## How theming works
Tokens are CSS custom properties on `:root` (the default minimal theme). Each `.theme-*` class overrides a subset. Apply a theme by adding the class anywhere — usually on `` or a top-level wrapper.
```html
```
```html
… this card is editorial …
```
Themes can nest. Setting `theme-*` on a child element overrides only the tokens that theme defines; the rest inherit from the parent.
### Adding a fifth theme
Add a new class to `tokens.css` that overrides whichever tokens differ from `:root`:
```css
.theme-sunset {
--bg: #2b0d0e;
--surface: #3a1316;
--accent: #ff8a3a;
--accent-2: #f43f5e;
--text: #fef7ee;
--text-2: #f0c8b0;
--border: #4a1f23;
--button-bg: #ff8a3a;
--button-fg: #2b0d0e;
}
```
You don't need to redefine the whole token set — just the differences. Components don't change.
## Usage in plain HTML (no bundler)
```html
```
## Usage in a React codebase
Convert the three `.jsx` files from `Object.assign(window, …)` to named `export` statements. The components have no runtime dependencies beyond React.
```jsx
// In your app
import "vibn-ai-templates/tokens.css";
import { Button, Card, Input, Field, Tabs } from "vibn-ai-templates/components";
import { SidebarShell } from "vibn-ai-templates/shells";
// Pick a theme on your root
…
```
## Conventions
- **Inline styles read from CSS vars** — `style={{ background: "var(--surface)" }}`. This is intentional: it lets the entire library reskin with one class swap, and avoids a CSS-in-JS dependency.
- **Components are presentational.** State (open/closed modals, active tabs, form values) lives in your app. Pass `active` + `onChange` to controlled components.
- **No external icon dependency.** `icons.jsx` ships a curated set. Add to it freely.
- **Avatars hash a color from the name** unless you pass `color="#…"`.
- **Tables and tabs are uncontrolled-friendly** — pass `rows`/`items`, omit selection props if you don't need them.
## Showcase
`Vibn UI Showcase.html` at the project root renders every component across every theme. Use it as the visual reference and as a starting point for new screens.
## Versioning
This is a starter — fork it. There's no semver, no changelog. Edit `tokens.css` to match your brand, prune what you don't use, extend what you do.