Component CSS blocks

The blocks option of systhema.config decides which component CSS families the Tailwind plugin emits, and configures the few that take settings (icons, column counts). Every block is on by default; turn off the ones a project does not use to keep the stylesheet small.

Configuring blocksLink to this section

Each key accepts a boolean. The blocks that take settings also accept an object; an object turns the block on unless it sets enabled: false, so false and { enabled: false } both disable a block.

import type { SysthemaConfig } from '@systhemaui/core'

const config: SysthemaConfig = {
  blocks: {
    carousel: false,
    gallery: false,
    columns: { count: 6 },
    grid: { paddingCols: 8 },
    accordion: { openRotate: 45 },
  },
}

export default config

Your blocks object is merged into the defaults, so list only the blocks you change.

Every blockLink to this section

IconsLink to this section

Icon settings are CSS mask-image values. The icon is painted in the element's current color through the mask, so the SVG's own fill does not matter. Pass a data URL:

const chevron = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E")`

const config: SysthemaConfig = {
  blocks: {
    header: { subNavigationIcon: chevron },
    form: { selectIcon: chevron },
  },
}

Encode <, > and # in the SVG (%3C, %3E, %23) and use single quotes inside it, as above.

The header menu toggle takes either a pair of static icons or the built-in animated icon:

const config: SysthemaConfig = {
  blocks: {
    header: { menuIcon: { type: 'animated' } },
  },
}

With type: 'static' (the default), set openIcon and closeIcon the same way as the other icons. For the accordion, openedIcon replaces closedIcon while an item is open, and openRotate rotates the icon by that many degrees when open (false, the default, does not rotate). Both icons also accept false: no closed icon, or no swap.

Blocks that borrow another block's classesLink to this section

Some component rules apply another block's utility instead of repeating its declarations: .form-label takes text-form-label, and formatted rich text takes the heading styles, link, quote, separator and the list classes. Those bindings follow the flag of the block that owns the class, so turning link off while keeping richtext on skips the link binding instead of breaking the build. See Components that borrow another block's classes.

Container blocks (stack, card, hero, columns and others) also suppress the scroll reveals of their children; see Child reveals.

RelatedLink to this section

• Tailwind integration
• Cascade layers
• systhema.config reference