VelinStyle in an existing project

VelinStyle is a CSS-first toolkit plus optional Web Components. Install from npm or use a CDN, load it once globally, then compose markup with velin-* classes and custom elements.

Prerequisites

A modern evergreen browser (OKLCH and container queries).
<meta name="viewport" content="width=device-width, initial-scale=1"> on every page.
Either a bundler (Vite, Webpack, Rspack, …) or static HTML with <link> / <script> tags.

npm

npm install @birdapi/velinstyle

Import the main stylesheet once in your entry CSS (after any minimal reset you rely on):

@import "@birdapi/velinstyle/dist/velinstyle.css";
/* or velinstyle.min.css via your bundler / pipeline */

Optional interactive components (ES module):

import "@birdapi/velinstyle/dist/velinstyle-components.js";

Without ES modules, load @birdapi/velinstyle/dist/velinstyle-components.iife.js with a normal <script src> tag (see Download).

CDN

Pin a semver range in production. Example (replace version as needed):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@0.8.0/dist/velinstyle.min.css">
<script src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@0.8.0/dist/velinstyle-components.iife.js"></script>

Load order & conflicts

VelinStyle uses @layer. Load it after global resets and before highly specific project CSS, or keep overrides in named layers. The velin- prefix avoids most collisions with Bootstrap/Tailwind class names; still, avoid running two full frameworks side by side.

Themes

Extra presets live under @birdapi/velinstyle/dist/themes/*.css. Add a second stylesheet and toggle data-velin-theme on <html> or sections — see Color modes.

Optional CLI

Custom bundles, icons, HTML blueprints, design-token builds, and project scans:

npx velinstyle blueprint hero-section
npx velinstyle tokens build --input tokens.json --out dist/tokens.css
npx velinstyle scan

Details: CLI, Security, Validation (forms CSS helpers).