feat: flatten routes and merge marketing and onboarding directories
This commit is contained in:
120
design-templates/VIBN (2)/vibn-ai-templates/README.md
Normal file
120
design-templates/VIBN (2)/vibn-ai-templates/README.md
Normal file
@@ -0,0 +1,120 @@
|
||||
# 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 (`<Icon name="search"/>`) plus a `<VibnMark/>` 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 `<html>` or a top-level wrapper.
|
||||
|
||||
```html
|
||||
<html class="theme-glass">
|
||||
<!-- the whole page uses the glass theme -->
|
||||
</html>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- or scope a theme to one region -->
|
||||
<div class="theme-editorial">
|
||||
<Card>… this card is editorial …</Card>
|
||||
</div>
|
||||
```
|
||||
|
||||
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
|
||||
<link rel="stylesheet" href="vibn-ai-templates/tokens.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"></script>
|
||||
|
||||
<script type="text/babel" src="vibn-ai-templates/icons.jsx"></script>
|
||||
<script type="text/babel" src="vibn-ai-templates/components.jsx"></script>
|
||||
<script type="text/babel" src="vibn-ai-templates/shells.jsx"></script>
|
||||
|
||||
<div id="root" class="theme-dark"></div>
|
||||
|
||||
<script type="text/babel">
|
||||
function App() {
|
||||
return (
|
||||
<AuthCenteredShell brand={{ name: "Acme" }}>
|
||||
<h1 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>Welcome back</h1>
|
||||
<p style={{ color: "var(--text-2)", marginTop: 6 }}>Sign in to continue.</p>
|
||||
<Field label="Email"><Input value="mira@acme.io"/></Field>
|
||||
<Field label="Password"><Input type="password" value="••••••••••"/></Field>
|
||||
<Button full>Sign in</Button>
|
||||
</AuthCenteredShell>
|
||||
);
|
||||
}
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||||
</script>
|
||||
```
|
||||
|
||||
## 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
|
||||
<html className="theme-dark">…
|
||||
```
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user