How to Use
Three steps to go from browsing to shipped. Each component is copy-paste ready.
Step 1 — Browse
Navigate the sidebar to find the component you need. Each component page shows all variants with live previews.
Step 2 — Copy
Click the Copy button on any preview. The full HTML with Tailwind classes is copied to your clipboard.
Each component also has a JSX tab for React users and a Vue tab for Vue users — same component, framework-ready syntax.
Step 3 — Paste & Customize
Paste the code into your project. Because it's just Tailwind classes, you customize it like any other HTML: change colors, sizes, spacing directly in your markup.
HTML — Example: Spinner Loader
<!-- Paste this wherever you need a loader -->
<div class="flex items-center justify-center">
<div class="w-10 h-10 rounded-full border-2 border-yellow-400/20 border-t-yellow-400 animate-spin">
</div>
</div>That's really it. No provider wrapping, no context, no imports from any package.