⚙️ Components

Component Library

Browse, preview, and copy all UI components. Download the full kit for Figma or Adobe XD.

Buttons

Action elements in multiple variants and sizes.

/* Primary */
<button class="ds-btn-primary">Primary</button>

/* Ghost */
<button class="ds-btn-ghost">Ghost</button>

/* Outline */
<button class="ds-btn-outline">Outline</button>

/* Danger */
<button class="ds-btn-danger">Danger</button>

/* Sizes */
<button class="ds-btn-primary ds-btn-sm">Small</button>
<button class="ds-btn-primary ds-btn-lg">Large</button>

Badges

Status indicators and labels in multiple colors.

Indigo Violet Sky Success Warning Error Neutral Live Pending

<span class="ds-badge-indigo">Indigo</span>
<span class="ds-badge-emerald">Success</span>
<span class="ds-badge-rose">Error</span>

/* With dot */
<span class="ds-badge-dot ds-badge-emerald">
  <span class="ds-dot bg-emerald-400"></span>
  Live
</span>

Inputs

Text fields in multiple states with label and helper text.

Default

With icon

Success state

Looks good!

Error state

This field is required.

Textarea

/* Default */
<input type="text" class="ds-input" placeholder="Enter value..." />

/* Error */
<input type="text" class="ds-input ds-input-error" />
<p class="ds-helper ds-helper-error">Error message</p>

/* Textarea */
<textarea class="ds-input ds-textarea"></textarea>

Selects

Dropdown selection fields.

Default select

Disabled

<select class="ds-input ds-select">
  <option>Choose an option</option>
  <option>Option one</option>
</select>

Checkboxes

Custom styled checkboxes and radio buttons.

Checked option Unchecked option Disabled option

Radio option A Radio option B

<label class="ds-checkbox-label">
  <input type="checkbox" class="ds-checkbox" />
  <span>Label text</span>
</label>

<label class="ds-checkbox-label">
  <input type="radio" class="ds-radio" />
  <span>Radio option</span>
</label>

Toggles

On/off switch components.

Enabled toggle

Disabled toggle

Small toggle

/* Toggle — add/remove .active to toggle state */
<div class="ds-toggle active"></div>
<div class="ds-toggle"></div>

/* Small */
<div class="ds-toggle ds-toggle-sm active"></div>

Cards

Glass surface containers in multiple layouts.

🎨

Basic Card

A simple glass card with icon, title and description.

Total Users

24,891

↑ 12.4%

Action Card

Cards can include actions and CTAs at the bottom.

/* Basic glass card */
<div class="ds-card">
  <div class="ds-card-icon bg-indigo-500/10 text-indigo-400">🎨</div>
  <h3>Card Title</h3>
  <p>Card description text.</p>
</div>

Modals

Dialog overlays for confirmations and forms.

/* Modal backdrop */
<div class="ds-modal-backdrop">
  <div class="ds-modal">
    <h2 class="ds-modal-title">Modal Title</h2>
    <p class="ds-modal-body">Modal content goes here.</p>
    <div class="ds-modal-footer">
      <button class="ds-btn-ghost">Cancel</button>
      <button class="ds-btn-primary">Confirm</button>
    </div>
  </div>
</div>

Navbars

Sticky top navigation with glass effect.

<nav class="ds-navbar px-6 py-3 flex items-center justify-between">
  <span class="font-semibold">Brand</span>
  <div class="flex gap-5 text-sm text-gray-400">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
  <button class="ds-btn-primary">Sign in</button>
</nav>

Footers

Page footer with brand, links and status.

<footer class="ds-footer px-6 py-6">
  <div class="flex items-center justify-between">
    <span>Brand</span>
    <p>© 2025 Company</p>
    <div>
      <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
      <span>All systems operational</span>
    </div>
  </div>
</footer>