Documentation

A minimal CSS library inspired by shadcn, usable with plain HTML.

Getting started

Include the stylesheet and script, then use class names and data attributes.

Link these two files in your HTML:

Theming

Set data-theme on <html> to light or dark.

Current theme updates on <html>.

Typography

Headings, body text, muted copy, and inline pre.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text with the text class.

Small body text with text-small.

Muted text with text-muted.

Inline 

pre
for short snippets.

Blockquote

Quoted content with a left border and surface background.

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

Spacers & HR

Vertical and horizontal spacing helpers, plus a horizontal rule.

Above the spacer

Below the spacer

Left Right

Buttons

Primary, secondary, error, link, and text variants.

Tooltip

Wrap a control and set data-tooltip for hover/focus text.

Forms

Labels, inputs, errors, hints, and textareas.

This field is required.

Hints appear below the field group.

Select

Custom select with data-select attributes.

Pick an option to see the select:change detail.

Datepicker

Calendar picker initialized via data-datepicker.

Choose a date to see the datepicker:change detail.

Timepicker

Hour, minute, and meridiem columns with data-timepicker.

Pick a time to see the timepicker:change detail.

Radio

Custom radio controls with a visually hidden native input.

Selected plan: basic

Checkbox

Custom checkbox with an SVG check mark.

Accepted: false

Table

Native tables styled by minima defaults.

# Name Email
1 namishh hey@namishh.com
2 rohith hey@rohith.net
3 mridul hey@mridul.sh

Alerts

Primary, secondary, and error alert banners.

This is a standard alert
This is a secondary alert
Something went wrong

Avatar

Sizes xl, lg, md, sm, plus radius helpers.

Badge

Small status labels in primary, secondary, and error.

primary
secondary
error

Tabs

Use data-tabs, data-tabs-trigger, and data-tabs-panel. This page uses the same pattern for Preview / Code.

Content for the first tab panel.
Active tab: one

Toast

Add a toast container, then call showToast(message, options).

Popover

Trigger and panel pair with data-popover.

Dialog

Open with data-dialog-open="id" matching the overlay id.

Dialog events will appear here.

Accordion

Expandable items with data-accordion triggers and panels.