Vanilla HTML/CSS/JS Components
A complete collection of design system components built with pure HTML, CSS, and vanilla JavaScript. No React required!
Component Showcase
See how components work together in a cohesive interface.
Welcome Back, User!
Here's what's happening with your projects today.
Active
JD
Total Projects
12
24
Completed
+3
18
In Progress
6
6
New Updates Available
Version 2.0 is now available with new features and improvements.
Deployment Successful
Your latest changes have been deployed to production.
Quick Action
Create a new project or update settings.
Available Actions
Detailed Component Examples
Explore comprehensive examples of each component type with detailed usage patterns.
Buttons
All button variants, sizes, and states
Cards
Card layouts with headers and footers
Inputs
Text inputs with icons and validation
Alerts
Notification and message components
Dialogs
Modal dialogs with overlays
Forms
Checkboxes, radios, selects, textareas
UI Elements
Badges, avatars, and separators
Interactive
Tabs, accordions, progress, skeletons
Getting Started
Quick guide to using the vanilla components in your project.
1. Include the CSS
<link rel="stylesheet" href="path/to/dist/styles.css">
2. Include the JavaScript (for interactive components)
<script src="path/to/vanilla/js/components.js"></script>
3. Use the components
<button class="inline-flex items-center justify-center ... bg-primary text-primary-foreground ...">
Click Me
</button>
4. Set the theme
<html data-theme="light"> <!-- or dark, atxp, dbg, auto -->