Nusantara UI Kit brings a fresh perspective to web UI components — a minimalist button and badge collection inspired by the natural palette of the Indonesian archipelago: forest greens, aged gold, coastal sky, and spice tones.

Unlike generic blue-grey UI kits, this collection has a visual identity you can build a brand around.

• 6 solid button variants (Primary, Gold, Spice, Sky, Stone, Ink)
• 5 outline button variants
• 5 soft-fill button variants (low visual weight, ideal for secondary actions)
• 3 ghost button variants
• 5 button sizes: XS, SM, MD, LG, XL
• Pill, square, and icon-only shapes
• Button groups (segmented control style)
• Loading state with CSS spinner animation
• Disabled state
• Full-width (block) button
• 6 soft-fill badge variants with optional dot indicator
• 5 outlined badge variants
• Square label badges (version tags, PRO/SALE labels)
• Count / notification badges — positioned overlay on any element
• 5 animated status chips (Active, Pending, Error, Info, Idle)

Signature detail: every button features a subtle batik-inspired micro-dot overlay that appears on hover — a nod to Indonesian textile geometry, built entirely in CSS.

• Any modern browser (Chrome, Firefox, Safari, Edge)
• No JavaScript framework required
• No CSS framework required
• Optional: DM Sans font via Google Fonts (fallback to system-ui)

1. Copy nusantara-ui.css into your project
2. Link it in your HTML head
3. Add class names to your elements — done
4. Open demo/index.html in a browser to see all components

All design tokens (colors, radius, font) are exposed as CSS custom properties. Override any value in your own :root to adapt the palette to your brand.

hat's included

• nusantara-ui.css — main stylesheet (minify-ready)
• demo/index.html — full interactive component showcase
• README.md — class reference and usage guide