Skip to content
BaseLayer Themes

Docs

Components

UI atoms and layout utilities — elements, containers, and BaseLayout helpers.

Every BaseLayer theme organizes reusable UI in src/components/. Components are atoms and helpers used inside blocks. They are not full page sections.

Kit layers

Layer Path Role
Components src/components/ Atoms and layout utilities (this page)
Blocks src/blocks/ Full-width page units
Pages src/pages/ Compose blocks into routes
Templates packaged themes Sellable products on Themes — see Templates

Live previews

Component pages include an embedded live preview where useful. When running a theme locally with dev.showDevRoutes: true:

  • /system/components/ — component library
  • /blocks/ — stacked block catalog

Set dev.showDevRoutes: false before shipping a theme.

How components get onto a page

Import components inside blocks or pages — there is no blocks.ts entry for atoms:

---
import Button from "@/components/elements/Button.astro";
import Text from "@/components/elements/Text.astro";
---

<Text tag="h2" variant="displaySm">Heading</Text>
<Button href="/contact/">Contact</Button>

For full-width page units, see the Blocks overview.