Sarv UI

A Minimal, Theme-Aware & Dynamic UI Component Library for Tailwind CSS v4

Live Interactive Demo →

Highlights

• 15 Curated Handcrafted Themes: Persian, Cyberpunk, Matcha, Tokyo Midnight, Ocean Abyss, Emerald, Crimson, Sunset, and sharp variants.
• Tailwind CSS v4 Ready: Native @plugin and @theme support with pure CSS variable architecture.
• Tactile & Fluid Animations: 3D hover elevations, center-expanding focus accents, floating labels, and smooth state transitions.
• 100% Token-Driven: Every component (buttons, custom inputs, custom selects, badges, checkboxes, radios) automatically adapts to any theme without hardcoded CSS.
• First-Class RTL Support: Built-in bidirectional support for Persian/Arabic layouts.

Installation

Install Sarv UI via npm:

npm install sarv-ui

Peer Dependency: Ensure tailwindcss v4 is installed:

npm install tailwindcss@^4.0.0

Quick Start

In your Tailwind CSS entry point (e.g., src/index.css or src/app.css):

@import "tailwindcss";
@plugin "sarv-ui";
@import "sarv-ui/sarv.css";

Switching Themes

Switch themes instantly anywhere on the DOM using the data-theme attribute:

<!-- Light Themes -->
<html data-theme="persian-light">
<html data-theme="sunset">
<html data-theme="matcha">

<!-- Dark & Vibrant Themes -->
<html data-theme="persian-dark">
<html data-theme="tokyo-midnight">
<html data-theme="cyberpunk">
<html data-theme="ocean-abyss">
<html data-theme="emerald">
<html data-theme="crimson">

Components Overview

1. Buttons (.btn)

Interactive buttons with tactile micro-interactions and elevation:

<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-soft btn-secondary">Soft Secondary</button>
<button class="btn btn-outline btn-success">Outline Success</button>
<button class="btn btn-flat btn-warn">Flat Warning</button>

2. Modern Inputs (.input-wrap)

Filled inputs with center-expanding focus line, floating icons, and state messages:

<div class="input-wrap">
  <label class="input-label">Email Address</label>
  <div class="input-box">
    <input type="email" class="input input-primary" placeholder="[email protected]" />
  </div>
</div>

3. Custom Animated Select (.select)

Theme-adaptive dropdown with animated chevron, keyboard accessibility, and subtle slide effects:

<div class="select-wrap">
  <label class="select-label">Select Framework</label>
  <div class="select-box">
    <div class="select select-primary">
      <div class="select-trigger" tabindex="0">
        <span class="select-value">Tailwind CSS v4</span>
        <svg class="select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m6 9 6 6 6-6"/></svg>
      </div>
      <div class="select-menu">
        <div class="select-option is-selected"><span>Tailwind CSS v4</span></div>
        <div class="select-option"><span>Next.js</span></div>
        <div class="select-option"><span>Vite</span></div>
      </div>
    </div>
  </div>
</div>

4. Badges, Checkboxes & Radios

<span class="badge badge-primary">New Feature</span>
<span class="badge badge-success">Completed</span>

<!-- Checkbox with animated scale pulse -->
<label class="checkbox checkbox-primary">
  <input type="checkbox" checked />
</label>

<!-- Radio button -->
<div class="radio-wrap">
  <input type="radio" class="radio" name="opt" checked />
  <div class="radio-mask radio-primary"></div>
</div>

Themes Included

| Theme Name | Description | Mode | | :--- | :--- | :--- | | persian-light | Balanced, clean warm-white palette | Light | | persian-dark | Deep charcoal with rich contrast | Dark | | tokyo-midnight | Deep indigo and electric purple neon | Dark | | ocean-abyss | Rich navy and glowing cyan | Dark | | cyberpunk | High-contrast black with neon yellow & cyan | Dark | | emerald | Deep forest greens and mint highlights | Dark | | crimson | Dark slate with scarlet & rose glow | Dark | | coffee-roast | Warm espresso and roasted amber | Dark | | royal-purple | Regal violet and lavender tones | Dark | | sunset | Warm terracotta, cream and golden hues | Light | | matcha | Soft organic sage and green tones | Light | | nordic | Crisp Scandinavian slate and ice-blue | Light | | rose-gold | Elegant blush and metallic rose accents | Light | | *-sharp | Zero-radius modern brutalist variants | Any |

Version

Current release: v0.3.0

Contributing

Pull requests and issues are welcome!
Open an issue on GitHub.

License

Distributed under the MIT License. See LICENSE for details.