Semtx

Semantic CSS library for the modern web

Lightweight, CSS-3 styling with native HTMX integration. Loading states, swap transitions, and smooth animations.

Getting Started

Just add the CSS file.

Quick Start


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/madeonawave/semtx@latest/semtx.css">

Color Palette

Light & Dark themes.

CSS-3 variables for easy theming.

oklch colors

Light Theme

Primary
var(--primary)

Blue
var(--blue)

Green
var(--green)

Red
var(--red)

Peach
var(--peach)

Yellow
var(--yellow)

Text
var(--text)

Base
var(--bg-base)

Surface
var(--bg-surface)

Mantle
var(--bg-mantle)

Dark Theme

Primary
var(--primary)

Blue
var(--blue)

Green
var(--green)

Red
var(--red)

Peach
var(--peach)

Yellow
var(--yellow)

Text
var(--text)

Base
var(--bg-base)

Surface
var(--bg-surface)

Mantle
var(--bg-mantle)

Buttons

Multiple variants, sizes, and states.

Semantic (no class needed)

The <button> element is styled directly.

<button>Default</button>
<button disabled>Disabled</button>

Variants

<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-outline">Outline</button>
<button class="btn-ghost">Ghost</button>
<button class="btn-danger">Danger</button>
<button class="btn-link">Link</button>

Sizes

<button class="btn-sm btn-primary">Small</button>
<button class="btn-primary">Medium</button>
<button class="btn-lg btn-primary">Large</button>

States

Use :disabled and .loading classes.

<button class="btn-primary">Normal</button>
<button class="btn-primary" disabled>Disabled</button>
<button class="btn-primary loading">Loading</button>

Form Inputs

Text, select, checkboxes, and more.

Text Inputs

Password

Small Input

<div class="form-group">
  <label for="demo-email">Email</label>
  <input type="email" id="demo-email" placeholder="you@example.com">
</div>

<div class="form-group">
  <label for="demo-password">Password</label>
  <input type="password" id="demo-password" placeholder="••••••••">
</div>

<div class="form-group">
  <label for="demo-small">Small Input</label>
  <input type="text" id="demo-small" class="input-sm" placeholder="Small">
</div>

Select & Textarea

Select

Message

<div class="form-group">
  <label for="demo-select">Select</label>
  <select id="demo-select" >
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

<div class="form-group">
  <label for="demo-message">Message</label>
  <textarea id="demo-message" placeholder="Your message..."></textarea>
</div>

Checkboxes & Radio

Accept terms Newsletter

Options Option A Option B

<label class="form-check">
  <input type="checkbox">
  <span>Accept terms</span>
</label>

<fieldset>
  <legend>Options</legend>
  <label class="form-check">
    <input type="radio" name="demo">
    <span>Option A</span>
  </label>
</fieldset>

Switch

Enable notifications Dark mode

<label class="switch">
  <input type="checkbox">
  <span class="switch-track"></span>
  <span>Enable notifications</span>
</label>

Cards

Content containers with header and footer.

Card Title

This is the card body content. Cards are great for grouping related content.

Flat Card

No shadow, just borders. Useful for denser layouts.

Outline

Transparent background with border only.

Navigation

Navbar, tabs, breadcrumb, and pagination.

Tabs (HTMX)

Breadcrumb (HTMX)

Pagination

Badges

Default Primary Success Error

Alerts

Info, success, warning, and error messages.

ℹ

Information

This is an informational message.

✓

Success

Your changes have been saved.

⚠

Warning

Your session will expire soon.

Error

Something went wrong. Please try again.

Tables

Striped, hoverable, and responsive tables.

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	User	Active
Carol White	carol@example.com	Editor	Pending
David Brown	david@example.com	User	Inactive

Modals & Dialog

Native HTML5 dialog with HTMX loading.

Native HTML5 Dialog (without HTMX)

<dialog id="my-dialog">
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

HTML5 Dialog (with HTMX)

<button hx-get="/content" 
         hx-target="#dialog-body"
         onclick="dialog.showModal()">
   Open
 </button>

 <dialog>
   <div id="dialog-body"></div>
 </dialog>

Skeleton Loaders

Loading placeholders with wave animation.

Text Skeleton

Avatar Skeleton

HTMX Patterns

Ready-to-use patterns for common HTMX patterns.

Determinate Progress Bar

Click to simulate progress

Indeterminate Progress Bar

Click to animate

Slim Progress Bar

Active Search (HTMX)

🔍

Alice Johnson	alice@example.com
Bob Smith	bob@example.com
Carol White	carol@example.com

Load More Button (HTMX)

Alice Johnson

alice@example.com

Kate Brown

kate@example.com

Bob Smith

bob@example.com

Uses hx-swap="beforeend" to append items to container

Infinite Scroll Trigger (HTMX)

Alice Johnson	alice@example.com
Bob Smith	bob@example.com
Loading more...

Fixed height with overflow. Auto-loads via hx-trigger="intersect" when sentinel scrolls into view.

Pending Load (HTMX)

Typography

Headings, code, blockquotes, figures, and prose.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph with bold and italic text.

This is a blockquote. It's great for quotes.

Inline code example.

# code block example
button {
  color: var(--primary);
}

Figures

Sample image — A sample figure with caption text.

HTML5 Semantic Elements

Native HTML elements that describe their meaning.

Main, Article, Section

Article Title

This is an article inside a main element.

<main>
  <article>
    <h3>Title</h3>
    <p>Content...</p>
  </article>
</main>

Aside (Sidebar)

<aside class="sidebar">
  <nav>
    <a href="#">Dashboard</a>
    <a href="#">Projects</a>
  </nav>
</aside>

Figure with Figcaption

<figure>
  <img src="...">
  <figcaption>Caption</figcaption>
</figure>

Header & Footer

Page Header

Content goes here.

<header>
  <h1>Title</h1>
</header>
<footer>
  <p>Copyright</p>
</footer>

Details & Summary

Click to expand

This is hidden content inside a details element. Great for FAQs, spoilers, and collapsible sections.

<details>
  <summary>Click to expand</summary>
  <p>Hidden content...</p>
</details>

Utilities

Common utility classes.

Spacing

p-4

mt-2

gap-2

item

Text

text-primary

text-sm

font-bold

text-center

Flex

Display

block inline-block