The developer-first CSS system.
Build clean interfaces.
Without utility chaos.
npm install @birdapi/velinstyleLive demos · Docs · Star on GitHub · npm
English · Deutsch
Modern UI stacks trade readability for speed.
| Pain | |
|---|---|
| Tailwind | Utility spam. Unreadable markup. Endless dark: prefixes. |
| Bootstrap | Hard to override. Legacy weight. Samey look. |
| Shoelace | Web Component overhead. Shadow DOM styling fights. |
You ship fast. Then you fight your HTML.
VelinStyle is a lean CSS + Web Component system built for developers who want structure, not sprawl.
- Semantic components —
velin-btn,velin-card,velin-table. Names you can grep. - Predictable BEM-style classes — no generated utility soup.
- CSS cascade layers — tokens → base → components → utilities. Overrides stay sane.
- Optional Web Components — 32 interactive widgets when you need behavior, plain CSS when you don't.
- OKLCH design tokens + 13 themes — swap
data-velin-theme, skipdark:hell. - Ship without a build step — link CSS + ESM from npm or CDN. CLI when you want automation.
- WCAG 2.2 AA by design — focus, ARIA, keyboard patterns baked in.
Readable HTML. Real components. No 40-class <div> tags.
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle.min.css">
<div class="velin-container velin-p-6">
<div class="velin-grid velin-grid--cols-3 velin-gap-4">
<article class="velin-card">
<div class="velin-card__body">
<h2 class="velin-card__title">Revenue</h2>
<p class="velin-card__text velin-text-3xl velin-font-bold">$24.8k</p>
<button type="button" class="velin-btn velin-btn--primary velin-btn--sm">Details</button>
</div>
</article>
<article class="velin-card">
<div class="velin-card__body">
<h2 class="velin-card__title">Users</h2>
<p class="velin-card__text velin-text-3xl velin-font-bold">1,284</p>
<button type="button" class="velin-btn velin-btn--outline velin-btn--sm">Details</button>
</div>
</article>
<article class="velin-card">
<div class="velin-card__body">
<h2 class="velin-card__title">Conversion</h2>
<p class="velin-card__text velin-text-3xl velin-font-bold">3.2%</p>
<button type="button" class="velin-btn velin-btn--ghost velin-btn--sm">Details</button>
</div>
</article>
</div>
</div>This is what Tailwind doesn't look like.
npm install @birdapi/velinstyle<link rel="stylesheet" href="node_modules/@birdapi/velinstyle/dist/velinstyle.min.css">
<script type="module" src="node_modules/@birdapi/velinstyle/dist/velinstyle-components.min.js"></script>Pin the version. Ship today.
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle.min.css">
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle-components.min.js"></script>dist/ is not in git. After clone:
git clone https://github.com/SkyliteDesign/velinstyle.git
cd velinstyle
npm install && npm run buildZero-build option: fork showcase-demos and open HTML files — unpkg CDN only.
Minimal page. One button. Done.
<!DOCTYPE html>
<html lang="en" data-velin-theme="ocean">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle.min.css">
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle-components.min.js"></script>
</head>
<body>
<div class="velin-container velin-p-6">
<button type="button" class="velin-btn velin-btn--primary">Ship it</button>
</div>
</body>
</html>Next: Getting started docs · Vite starter · React starter
Four rules. No exceptions.
- Clean HTML — structure first, decoration second.
- Predictable classes —
velin-*naming you and your IDE understand. - Readable UI code — diffs stay human-sized. Reviews stay fast.
- AI-friendly structure — consistent patterns for codegen; CLI
scaffoldandblueprintfor bootstrapping.
| Grid & layout | velin-grid, container queries, responsive utilities |
| Components | 35+ CSS components + 32 Web Components |
| Themes | 13 OKLCH presets via data-velin-theme |
| Footprint | ~150 KB CSS + ~111 KB JS (min, full bundle) |
| Accessibility | WCAG 2.2 AA, RTL, prefers-reduced-motion |
| Motion (0.8.0) | Sparkline, counter, live-dot, FLIP helpers, reveal |
| CLI | init, build, scan, scaffold, layout, blueprint, icons, prefix |
Advanced: CLI & architecture in CHANGELOG · Full docs
| Bootstrap | Tailwind | Shoelace | VelinStyle | |
|---|---|---|---|---|
| HTML readability | Medium | Low | Medium | High |
| Class predictability | Medium | Low | Medium | velin-btn--primary |
| Utility sprawl | Low | High | Low | Controlled |
| Override story | Hard | Config file | Shadow DOM | CSS layers + tokens |
| Accessibility | Partial | DIY | Good WC | WCAG 2.2 AA |
| Dark mode | Manual | dark: everywhere |
Theme attr | Token swap |
| App chrome | Legacy JS | BYO | WC only | CSS + optional WCs |
| Ship speed | Fast | Fast (with build) | Fast | CDN, no build required |
| Full-page demos | Basic | None official | Storybook | Live showcases |
Full application pages — not toy snippets.
|
|
|
|
|
|
|
|
All demos → · Fork showcase-demos →
PRs welcome. All sizes.
- Fork the repo
npm install && npm run build(dist/is gitignored)- Make your change · run
npm testandnpm run test:a11y - Open a pull request
See CONTRIBUTING.md for code style, branch rules, and review process.
Direction, not a commitment. See CHANGELOG for shipped work.
| Phase | Focus |
|---|---|
| Now (0.8.0) | Motion tokens, sparkline / counter / live-dot, FLIP helpers, filter utilities, scaffold + layout CLI |
| Next | Smaller optional bundles, more blueprint packs, expanded scaffold intents |
| Exploring | Framework adapters, design-token export, additional theme presets |
| Issues & bugs | github.com/SkyliteDesign/velinstyle/issues |
| Releases | github.com/SkyliteDesign/velinstyle/releases |
| Product site | velinstyle.info |
| Documentation | velinstyle.info/docs/ |
Help others find VelinStyle: Star the repo · Try a live demo · Fork showcase-demos
MIT — Copyright © 2026 VelinStyle
Made with care for the web by SkyliteDesign