A tiny UI foundation for product teams.
Product-grade UI.
Without the framework tax.
Pith gives you semantic HTML, accessible defaults, responsive layout, and a CSS layer you can understand and own.
1.47 KBcore CSS gzip0 runtime dependenciesNative HTML first
See the difference
A real UI, with nothing to hide.
Start with the browser. Add only the layer your product needs. The result is small, inspectable, and still useful when JavaScript is unavailable.
ProjectsAll systems ready
<button data-variant="primary">
Create project
</button>The foundation
Less abstraction. More ownership.
Everything you need for a solid product surface, with the browser’s behavior still intact underneath.
Semantic by default
Real HTML keeps navigation, keyboard operation, and assistive technology working together.
Small by design
Ship only the contracts your interface uses. No component runtime or dependency maze.
Ready for products
Responsive layout, focus states, form states, data patterns, and progressive enhancement are included.
| Project | Gzip | README |
|---|---|---|
| Pith core | 1.47 KB | Readme |
| Milligram | ≈2 KB | Readme |
| Pure.css | ≈3.5 KB | Readme |
| Bootstrap | ≈28 KB | Readme |
| Bulma | 77.8 KB | Readme |
Gzip figures compare CSS artifacts where available. Pith is measured as the core stylesheet; framework figures are full or default CSS distributions. Bundlephobia provides the Bulma package measurement.
Try the examples below
Explore the patterns
Start with the patterns most products need, then move into richer behavior. Every example uses real HTML; use your keyboard, resize the page, and open the source recipes.
1 · Start here
Native foundations
Buttons perform actions. Links go places. Headings, lists, code, badges, separators, and media keep their browser meaning.
Jump to controlsDraft⌘ K
Nothing saved yet.
Invalid, loading, and disabled states
Native validation keeps errors next to their source. Submit the form empty to try it, or use the controls above without JavaScript.
3 · Make state clear
Feedback and surfaces
Cards group content; alerts explain status; loading, error, and empty states make the next action explicit.
Empty and loading
No archived projectsArchived projects will appear here.
Loading project summary…
4 · Compose without wrappers
Layout and surfaces
Grid preview active.
6 · Focused tasks
Dialogs, drawers, menus, and tabs
Dialog and menu
The main action stays visible. Use More actions for secondary work.
Tabs
Two projects are ready to review.
Samira updated the project 4 minutes ago.
Notifications are enabled.
7 · Dense content
Tables, data, and readable content
| Project | Owner | Status | Updated |
|---|---|---|---|
| Northstar | Jordan Lee | Ready | Today |
| Beacon | Samira Khan | Review | Yesterday |
2 projects shown.
Readable by default
Long labels wrap, tables scroll in a labelled region, and content keeps its meaning at 200% zoom.
<table>...</table>8 · Add only when needed
Progressive enhancements
Comboboxes, command palettes, drawers, toasts, carousels, OTP fields, tooltips, and richer data-table behavior are optional recipes layered on native markup.
Combobox enhancement
Command palette
Search or use Arrow keys to move through actions; Enter chooses one.
Why optional?
When JavaScript is unavailable, native controls and primary content still work. Install a recipe when the product actually needs the behavior.
Get started
Bring your own markup.
Install the core layer, then add optional recipes when your product genuinely needs richer behavior.
Read the documentation# install
npm install pith-css
# use in your stylesheet
@import "pith-css/core.css";