SantyCSS Components — Ready-Made UI Components

Buttons

Style variants, sizes, and states. Combine .make-button with a style and size class.

Live Preview

<button class="make-button style-primary">Primary</button>
<button class="make-button style-success size-small">Small Success</button>
<button class="make-button style-outline size-large">Large Outline</button>

/* Styles: style-primary | style-success | style-danger | style-warning | style-outline | style-ghost */
/* Sizes:  size-small | (default) | size-large | size-xl */

Modal / Dialog

Pure CSS modal using the :target pseudo-class. No JavaScript required.

Live Preview

Open Modal

Trigger with <a href="#modal-id">

<a href="#my-modal" class="make-button style-primary">Open Modal</a>

<div id="my-modal" class="modal-overlay">
  <div class="modal-box">
    <div class="modal-header">
      <h4 class="modal-title">Title</h4>
      <a href="#" class="modal-close"></a>
    </div>
    <div class="modal-body">Content here.</div>
    <div class="modal-footer">
      <a href="#" class="make-button style-ghost">Cancel</a>
    </div>
  </div>
</div>

Dropdown Menu

Toggle-based dropdown with headers, items, and dividers.

Live Preview

<div class="dropdown">
  <button class="make-button style-primary dropdown-toggle"
          onclick="this.closest('.dropdown').classList.toggle('open')">
    Options
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-header">Actions</div>
    <a href="#" class="dropdown-item">Edit</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item danger">Delete</a>
  </div>
</div>

Tabs

Tabbed navigation with active states and tab panel switching.

Live Preview

Overview content here.

Details content here.

Settings content here.

<div class="tabs">
  <button class="tabs-item active" onclick="switchTab(this,'tab1')">Tab 1</button>
  <button class="tabs-item" onclick="switchTab(this,'tab2')">Tab 2</button>
</div>
<div id="tab1" class="tab-panel active">Panel 1</div>
<div id="tab2" class="tab-panel">Panel 2</div>

<script>
function switchTab(btn, id) {
  btn.closest('.tabs').querySelectorAll('.tabs-item').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById(id).classList.add('active');
}
</script>

Accordion

Expandable sections that collapse siblings when one is opened.

Live Preview

What is SantyCSS?

A plain-English utility-first CSS framework with 8,500+ classes.

No build step needed?

Yes — just drop in a single CSS file via CDN and you're ready to build.

How do I customize colors?

Override CSS custom properties like --santy-primary on :root to brand the whole framework.

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header" onclick="toggleAccordion(this)">
      Question
    </button>
    <div class="accordion-body">Answer content.</div>
  </div>
</div>

Toast / Notification

Inline notifications with success, error, warning, and info variants.

Live Preview

Saved!

Your changes were saved successfully.

Error

Failed to connect to server.

Warning

Your session is about to expire.

Info

A new version is available.

<div class="notification notification-success">
  <div>
    <div class="notification-title">Saved!</div>
    <div class="notification-desc">Your changes were saved.</div>
  </div>
</div>

/* Variants: notification-success | notification-error | notification-warning | notification-info */

Progress & Skeleton

Progress bars and animated loading skeleton placeholders.

Live Preview

65% complete

35% — custom color

Skeleton loader

/* Progress bar */
<div class="progress">
  <div class="progress-bar" style="width:65%"></div>
</div>

/* Skeleton */
<div class="skeleton set-height-16 round-corners-4"></div>

Badges & Chips

Compact status indicators and interactive filter chips.

Badges

New Active Error Pending Beta Draft

Chips

Design Done Urgent Review

/* Badge — pair .badge with background/color utilities */
<span class="badge background-blue-100 color-blue-700">New</span>
<span class="badge background-green-100 color-green-700">Active</span>

/* Chip — colored variant classes */
<span class="chip chip-blue">Design</span>
<span class="chip chip-green">Done</span>

Sidebar / Drawer

Slide-in side panel, CSS-only via :target.

Live Preview

Open Drawer

Sidebar content goes here.

<a href="#my-drawer" class="make-button style-primary">Open</a>

<div id="my-drawer" class="drawer-overlay">
  <div class="drawer-panel">
    <div class="drawer-header">
      <span>Sidebar</span>
      <a href="#" class="btn-close"></a>
    </div>
    <div class="drawer-body">Content</div>
  </div>
</div>

Table

Responsive data tables with hover, striped, and bordered variants.

Live Preview

Name	Role	Status	Joined
Alice Johnson	Admin	Active	Jan 2024
Bob Martinez	Editor	Pending	Mar 2024
Carol White	Viewer	Inactive	Jun 2023

<div class="table-responsive">
  <table class="table table-hover">
    <thead><tr><th>Name</th><th>Status</th></tr></thead>
    <tbody>
      <tr><td>Alice</td><td>Active</td></tr>
    </tbody>
  </table>
</div>

/* Variants: table | table-hover | table-striped | table-bordered */

Pagination & Breadcrumb

Page navigation and hierarchical breadcrumb trail.

Pagination

«
1
2
3
»

Breadcrumb

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">«</a></li>
  <li class="page-item active"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Current</li>
</ol>

Toggle & Range

Custom toggle switches and range sliders.

Live Preview

toggle / toggle-green / toggle-purple

<label class="toggle">
  <input type="checkbox">
  <span class="toggle-slider"></span>
</label>

<input class="range" type="range" value="60" />

Stepper

Multi-step progress indicator for wizards and onboarding flows.

Live Preview

✓
Account
2
Profile
3
Payment
4
Done

<ul class="steps">
  <li class="step done">
    <div class="step-dot">✓</div>
    <span class="step-label">Step 1</span>
  </li>
  <li class="step active">
    <div class="step-dot">2</div>
    <span class="step-label">Step 2</span>
  </li>
  <li class="step"><div class="step-dot">3</div><span class="step-label">Step 3</span></li>
</ul>

Card

Structured content containers with header, body, and footer sections.

Live Preview

Card Title Active

Card body content with a white background, border radius, and shadow.

Dark Card

Works with any background utility class.

<div class="card">
  <div class="card-header">Title</div>
  <div class="card-body">Content</div>
  <div class="card-footer">
    <button class="make-button style-primary">Save</button>
  </div>
</div>

Form Inputs

Input, select, textarea, and input group components.

Live Preview

https://

<input class="input" type="text" placeholder="Enter value" />
<select class="select"><option>Choose...</option></select>
<textarea class="textarea" rows="4"></textarea>

/* Input group with prefix */
<div class="input-group">
  <span class="input-addon">https://</span>
  <input class="input" type="text" placeholder="domain.com" />
</div>

Avatar & Spinner

User avatars and loading spinners in multiple sizes.

Avatars

JS

AB

CD

EF

Spinners

/* Avatar — pair .avatar size with background/color utilities */
<div class="avatar avatar-md background-blue-600 color-white">AB</div>

/* Sizes: avatar-sm | avatar-md | avatar-lg | avatar-xl */

/* Spinner */
<div class="spinner spinner-md"></div>
/* Sizes: spinner-sm | spinner-md | spinner-lg | spinner-xl */

Alerts

Contextual alert messages for feedback and status updates.

Live Preview

Info: Informational message here.

Success: Changes saved successfully.

Warning: Please review before continuing.

Error: Something failed. Please try again.

<div class="alert alert-info">Informational message.</div>
<div class="alert alert-success">Success message.</div>
<div class="alert alert-warning">Warning message.</div>
<div class="alert alert-danger">Error message.</div>

Navbar / Header

Light and dark navigation bar variants.

Live Preview

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <div class="navbar-menu">
    <a href="#" class="navbar-item active">Home</a>
    <a href="#" class="navbar-item">Docs</a>
  </div>
</nav>

/* Add .navbar-dark for dark variant */

Tooltip

CSS-only tooltips in four directions. No JavaScript required.

Live Preview

<span class="tooltip tooltip-top">
  <button class="make-button style-primary">Hover me</button>
  <span class="tooltip-content">Tooltip text</span>
</span>

/* Directions: tooltip-top | tooltip-bottom | tooltip-left | tooltip-right */

Ready-Made UI Components

Buttons

Modal / Dialog

Confirm Action

Dropdown Menu

Tabs

Accordion

Toast / Notification

Progress & Skeleton

Badges & Chips

Sidebar / Drawer

Table

Pagination & Breadcrumb

Toggle & Range

Stepper

Card

Form Inputs

Avatar & Spinner

Alerts

Navbar / Header

Tooltip