Semtx

Semantic CSS library for the modern web

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/madeonawave/semtx@main/semtx.css">
<script src="https://unpkg.com/htmx.org"></script>

Getting Started

Just add the CSS file.

Quick Start


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/madeonawave/semtx@main/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.

Variants

Sizes

States

Form Inputs

Text, select, checkboxes, and more.

Text Inputs

Password

Small Input

Select & Textarea

Select

Message

Checkboxes & Radio

Accept terms Newsletter

Option A Option B

Switch

Enable notifications Dark mode

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

CSS-driven modals with data attributes.

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.

.btn {
  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>

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