Build faster with Prism UI

A lightweight, accessible component library with beautiful design tokens, responsive layouts, and zero dependencies. Perfect for modern web applications.

Buttons

Multi-variant button components with loading states, multiple sizes, and full keyboard accessibility.

Variants
Sizes
States
HTML 
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>

Input Fields

Form controls with built-in validation states, helper text, and accessible labels.

This will be displayed on your profile
Please enter a valid email address
HTML 
<div class="form-group">
  <label class="form-label" for="email">Email Address</label>
  <input type="email" id="email" class="input-control" placeholder="you@example.com">
  <span class="form-helper">We'll never share your email</span>
</div>

<!-- Error State -->
<div class="form-group has-error">
  <input type="email" class="input-control">
  <span class="form-error-msg">Invalid email</span>
</div>

Cards

Flexible container components for content organization with optional hover effects.

Project Update

2 hours ago

The new component library has been successfully deployed to production. All tests passing with 98% coverage.

Hover Me

Interactive

This card has hover effects and can be clicked for actions.

Total Users
12,483
↑ +12.5% from last month
HTML 
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
    <p class="card-subtitle">Subtitle</p>
  </div>
  <p>Card content goes here...</p>
</div>

<!-- Interactive Card with Hover -->
<div class="card card-interactive">
  <h3 class="card-title">Hover Me</h3>
</div>

Badges

Small status indicators and labels for highlighting information.

Primary Active Pending Failed
HTML 
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">
  <span class="badge-dot"></span>
  Active
</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-danger">Failed</span>

Tabs

Segmented control for switching between related views.

HTML 
<div class="tabs-container">
  <button class="tab-btn active">Overview</button>
  <button class="tab-btn">Analytics</button>
  <button class="tab-btn">Reports</button>
</div>

Modals

Dialog overlays for focused interactions. Includes backdrop blur and keyboard navigation (ESC to close).

HTML 
<!-- Trigger Button -->
<button class="btn btn-primary" data-modal-trigger="demo-modal">
  Open Modal
</button>

<!-- Modal Markup -->
<div class="modal-overlay" id="demo-modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title">Modal Title</h3>
      <button class="modal-close-btn">×</button>
    </div>
    <div class="modal-body">
      <p>Modal content goes here...</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary modal-close-btn">Cancel</button>
      <button class="btn btn-primary">Confirm</button>
    </div>
  </div>
</div>