BLKC

Styling

How CSS works in BLKC — themes, design tokens, and block-level styles.

Styling

BLKC separates content from presentation.

Themes

Kits may carry a theme (WordPress theme.json compatible). Themes map design tokens to CSS custom properties.

Block styles

Each UI Block declares the props it accepts. Styling is applied through props and the block's renderer — not ad-hoc CSS.

CSS in BLKC

:root {
  --blkc-color-bg: #ffffff;
  --blkc-color-fg: #111111;
}

Block renderers emit scoped class names so custom CSS does not leak between blocks.

Try it

Live preview

Styled in BLKC

Editing this updates the preview.

Adding custom CSS

Add custom CSS in your own app after importing BLKC styles; block class names are stable and documented per block.

On this page