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
Live QA
Preview before you ship
The preview directory is generated from source pages, component docs, and pattern docs, so missing previews fail the build instead of drifting quietly.
pnpm --filter ./docs testComponents and patterns
Common entry points
- ButtonThe canonical action control - native button, token-driven, with primary/secondary/ghost variants.Preview
- FieldA labeled native form control with stacked and inline layouts, required markers, messages, validation, and input-group composition.Preview
- Data tableEnterprise data table with sortable headers, row selection, expandable rows, sticky column, density modes, and loading states.Preview
- NavVertical sidebar navigation with icon+label items, active states, collapsible sections, and icons-only variant.Preview
- DialogA modal dialog using the native dialog element - confirmation, forms, detail views. ::backdrop scrim, @starting-style entry/exit, header/body/footer.Preview
- App process builderPorchlight-native admin shell recipe for process drafts, step maps, validation feedback, and inspector forms.Preview