logo

Sarv UI

v0.3.1

Modern, tactile & animated Tailwind CSS component library

🌙 Persian Dark (Default)
☀️ Persian Light
📐 Persian Dark Sharp
📐 Persian Light Sharp
⚡ Cyberpunk Neon
🌲 Emerald Forest
🔮 Royal Purple Nebula
🌅 Sunset Terracotta
❄️ Nordic Glacier
🌆 Tokyo Midnight
🌸 Rose Gold
☕ Coffee Roast
🩸 Crimson Noir
🌊 Ocean Abyss
🍵 Matcha Zen

Buttons

Solid, Soft, Outline, Shadow (3D glow), and Relief (tactile 3D) variants

Solid
Soft
Outline
Shadow (Ambient Glow)
Relief (Tactile 3D Depth)

Checkboxes

Smooth spring-scale animation, custom icons, strokes & multi-sizes

Theme Colors
Sizes (xs → 2xl)
Custom Icons & Strokes

Radios

Smooth expanding ring selection with theme accent sync

Select Option

Badges

Adaptive radius (pill rounded-full or 0px in Sharp themes), Solid, Soft, and Outline

Solid Badges
Primary Secondary Success Warning Danger Info Accent Neutral
Soft Badges
Soft Primary Soft Secondary Soft Success Soft Warning Soft Danger Soft Info Soft Accent Soft Neutral
Outline Badges
Outline Primary Outline Secondary Outline Success Outline Warning Outline Danger Outline Info Outline Accent Outline Neutral

Inputs

Clean interactive inputs: forward text slide, 3D elevated icons, center-expanding underlines, and theme-adaptive filled surfaces.

1. Default Inputs (Subtle Surface & Text Slide)

Focus to see the 5px slide and colored bottom accent
Primary
Success
Warning
Danger

2. Floating Labels (label-placeholder)

Placeholder floats cleanly outside and above the box on focus

3. 3D Floating Icons

Click or focus an input — the icon card lifts out in 3D with shadow

4. Border Variant (Animated Center Expansion)

Focus to watch the colored line expand horizontally from center

5. Shadow Variant (Tactile 3D Press)

Deep ambient colored glow that smoothly presses 2px down when focused

6. Transparent Variant (Backgroundless)

No background fill, text sits directly on canvas with center-expanding focus line

7. Shape Variants (Pill & Square)

Full capsule curve (input-pill) or strictly 0px crisp edges (input-square)

8. Interactive Features (Loading, Progress & Toggle)

Dual-ring spinning loader, dynamic password strength, and eye toggle

9. Shortcut Badges & Quick Search

Search inputs with embedded keyboard shortcut hints
Ctrl + K
⌘ + P
ESC

10. Validation States (Tinted Surface & Feedback)

Clean single-bordered tinted surface with status icons & messages
Username is available!
Please enter a valid email address.
Password is too weak.

11. Systemic Sizes & Proportional Slide (+4px to +7px)

Dynamic forward-sliding text/placeholder (+4px in XS up to +7px in XL) & harmonized button heights
Extra Small (24px) – Slide +4px
Small (32px) – Slide +4px
Medium (40px) – Slide +5px
Large (48px) – Slide +6px
Extra Large (56px) – Slide +7px

Select / Dropdown

Pure custom floating card dropdowns with animated chevrons, smooth option hover slide, active checkmarks, and system-matched sizes.

1. Theme Colors

Click to open: floating menu with active checkmark and smooth hover slide
Design Systems
UI / UX Engineering
Frontend Architecture
Production (v2.4)
Staging Preview
Development Branch
High Priority
Medium Priority
Low Priority
Require Review
In Progress
Draft

2. Style Variants (Border & Shadow)

Minimal underline or 3D tactile press with colored glow
Iran (IR)
Germany (DE)
Canada (CA)
Verified Account
Standard Account
Tactile Primary
Tactile Option Two
Tactile Accent
Tactile Option Two

3. Shape Variants (Pill & Square)

Full rounded capsule curve or 0px crisp edges
Pill Capsule (Primary)
Option B
Pill Capsule (Success)
Option B
Square Crisp (Accent)
Option B
Square Crisp (Warning)
Option B

4. Systemic Sizes (XS to XL)

1:1 matched heights with Sarv UI buttons and inputs
Extra Small (24px)
select-xs
Option 2
Small (32px)
select-sm
Option 2
Medium (40px)
select-md
Option 2
Large (48px)
select-lg
Option 2
Extra Large (56px)
select-xl
Option 2