Guides
Native CSS design system
Porchlight
Docs, component contracts, token references, and live preview fixtures for building accessible application UI without a JavaScript runtime dependency.
Start here
Choose the artifact you need
Install and wire CSS Package entry, import order, and the first component. Browse components 52 contracts with HTML, states, tokens, and accessibility notes. Open live previews 67 generated fixtures for visual QA and layout checks. Check tokens 3 token reference pages backed by the framework source.
Live QA
Preview before you ship
The preview directory is generated from source pages and component docs, so missing component previews fail the build instead of drifting quietly.
pnpm --filter ./docs testComponents
Common entry points
- Button The canonical action control - native button, token-driven, with primary/secondary/ghost variants. Preview
- Field A labeled native form control with stacked and inline layouts, required markers, messages, validation, and input-group composition. Preview
- Data table Enterprise data table with sortable headers, row selection, expandable rows, sticky column, density modes, and loading states. Preview
- Nav Vertical sidebar navigation with icon+label items, active states, collapsible sections, and icons-only variant. Preview
- Dialog A modal dialog using the native dialog element - confirmation, forms, detail views. ::backdrop scrim, @starting-style entry/exit, header/body/footer. Preview
- App process builder Porchlight-native admin shell recipe for process drafts, step maps, validation feedback, and inspector forms. Preview