Sitefold Library
The components, tokens and guidelines behind the Sitefold interface.
What it is
Sitefold's component library is hand-rolled. There is no Tailwind, no shadcn, no Radix, no cva — every component in here is a plain React component with its own CSS file, styled entirely from design tokens. That is a deliberate constraint rather than an accident of history, and npm run design:audit fails the build if it slips.
The reason is the product. Sitefold is a website builder: it renders the user's markup next to its own. A utility framework that sweeps global classes across the page leaks Sitefold's styling into the sites customers export. Owning the CSS is what keeps the two apart.
Principles
Tokens decide, components consume
Components never invent a colour, a space, a radius or a type size. They name a --color-* token and nothing above it in the tier. A raw hex value in product CSS is an audit failure, not a style preference.
Composition over configuration
Compound components are assembled from parts — Dialog / DialogContent / DialogFooter — rather than driven by a growing object of booleans. If a component needs a fifth boolean, it probably needs a part instead.
The accent comes from the surface
Neutrals are achromatic; colour arrives through one contextual accent per surface. The same markup is purple in the builder and green in the CMS, without a prop being passed.
The previews here are real
Every example on this site renders the actual component, not a screenshot or a redrawn approximation. A doc page cannot claim behaviour the library does not have.
What's here
40 components across 6 groups, plus the foundations they are built from.
Actions3
Forms10
Containers5
Overlays6
Navigation5
Data display11
Where to start
- Using the library — importing, composing, and the two directories components must never reach.
- Foundations — the tokens everything else is built from.
- Components — the full catalogue.
- Contributing — the three steps for adding one.