Essential just like water is.
- Pure HTML, CSS, JS
- No third party dependencies
- Free and open source.
A lightweight, pure HTML/CSS/JS framework for designing beautiful interfaces. Zero runtime dependencies, no mandatory build tools, just clean and simple code.
[Browse Full Documentation →](https://vanduo.dev/#docs
- 🎨 Pure CSS/JS - No libraries, no dependencies
- 🚀 Lightweight - Minimal file size, maximum performance
- 📱 Responsive - Mobile-first design approach
- 🎯 Utility-First - Flexible utility classes for rapid development
- 🧩 Modular - Import only what you need
- ♿ Accessible - Built with accessibility in mind (WCAG 2.1 AA)
- 🌙 Dark Mode - Automatic OS preference detection + manual toggle
- 🎛️ Theme Customizer - Real-time color, radius, font, and mode customization
- 🔍 SEO-Ready - Comprehensive meta tags, structured data, and sitemap
Stop wrapping everything in bloated container DOMs. Build beautiful, accessible UI components with clean, predictable utility classes:
<!-- Raw HTML -->
<button>Click Me</button>
<!-- With Vanduo Framework -->
<button class="vd-btn vd-btn-primary vd-radius-full">
<i class="ph ph-sparkle"></i> Click Me
</button>We strongly recommend using pnpm for installing Vanduo Framework. Vanduo is strictly configured with .npmrc security policies (such as blocking exotic sub-dependencies and strict peer enforcement) that work best with inside the pnpm ecosystem.
pnpm add @vanduo-oss/framework(Note: While npm install @vanduo-oss/framework and yarn add @vanduo-oss/framework will still technically work, they do not inherently enforce the same strict lockfile and isolated node_modules security guarantees that pnpm provides out-of-the-box).
Load directly from jsDelivr — no download required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Vanduo CSS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@main/dist/vanduo.min.css">
</head>
<body>
<!-- Your content here -->
<!-- Vanduo JS via CDN -->
<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@main/dist/vanduo.min.js"></script>
<script>Vanduo.init();</script>
</body>
</html>Pin to a specific version (recommended for production):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.2.3/dist/vanduo.min.css">
<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.2.3/dist/vanduo.min.js"></script>
<script>Vanduo.init();</script>Download dist/ folder and include locally:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="dist/vanduo.min.css">
</head>
<body>
<!-- Your content here -->
<script src="dist/vanduo.min.js"></script>
<script>Vanduo.init();</script>
</body>
</html>The dist/ folder is self-contained (CSS, JS, Fonts, Icons).
For development or when you need more control, use the unminified source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="css/vanduo.css">
</head>
<body>
<!-- Your content here -->
<script src="js/vanduo.js"></script>
<script>Vanduo.init();</script>
</body>
</html>This project includes an llms.txt file — a structured markdown summary designed for AI assistants and LLM-powered code editors. It provides quick access to framework documentation, component references, and usage patterns.
Use the hardened upload script to attach only approved bundle artifacts from dist/:
pnpm run release:assets -- v1.2.3Notes:
- If tag is omitted, it defaults to
v+ version frompackage.json. - Use
--dry-runto preview files without uploading.
Comprehensive documentation for all components, utilities, and customization options is available at vanduo.dev.
[View Documentation](https://vanduo.dev/#docs
- Dark Mode: Works automatically with system preferences. Can be forced via
data-theme="dark"on<html>. - Theme Customizer: Built-in runtime tool to change colors, fonts, and radius.
- Modular Imports: Import only specific components (e.g.,
css/components/buttons.css) to keep your site lean. - Icons: Includes Phosphor Icons (Regular + Fill weights bundled).
vanduo-framework/
├── dist/ # Production ready files (minified)
├── css/
│ ├── vanduo.css # Main framework file (imports all)
│ ├── core/ # Foundation (colors, typography, grid)
│ ├── components/ # UI components (buttons, cards, etc)
│ ├── utilities/ # Utility classes
│ └── effects/ # Visual effects
├── js/
│ ├── vanduo.js # Main entry point
│ └── components/ # Component logic
├── icons/ # Phosphor Icons
├── fonts/ # Web fonts
└── tests/ # Framework test suite
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
MIT License - see LICENSE file for details.
- Color System: Open Color by Heeyeun Jeong (MIT License)
- Icons: Phosphor Icons (MIT License)
Vanduo Framework - Built with ❤️ for the web.