Skip to content
Habitus Design

Primitives

Layout and text bricks of @saas-design/ui (generated by @ui8kit/codegen 2.0 for React 19, Svelte 5 and Go templ with identical DOM). Each preview renders the real generated part (React in design-react, Svelte in design-svelte) with ui-* classes from the adapter.

ui.block

Block is the one semantic root of a file (div, section, article, aside, header, footer, main, nav, figure, search, hgroup). Any file (block, composite, screen) may open on one Block; never nest Block inside Block in one file, never repeat it in a loop.

Block

Block renders a resolved landmark element with children.

  • defaults
    Block
  • tag.footer
    Block
  • tag.header
    Block
  • tag.main
    Block
  • tag.nav
  • tag.section
    Block
PropTypeNotes
IDstring
Classstringadds Tailwind utilities
Tagstringsemantic tag: div (default), section, article, aside, header, footer, main, nav, figure, search, hgroup
Attrsattrs
Childrenchildren

ui.box

Box is a generic layout wrapper for internal sections. Not for top-level landmarks — use Block for page regions.

Box

Box renders a div layout wrapper.

  • defaults
    Box
  • tag.default
    Box
PropTypeNotes
Classstringadds Tailwind utilities
Tagstringdiv only. Use Block for landmarks (aside, section, header, nav).
Attrsattrs
Childrenchildren

ui.container

Container wraps page content with a constrained width shell. Optional main or section tag for inner layout regions.

Container

Container renders the outer content shell.

  • defaults
    Container
  • tag.default
    Container
  • tag.main
    Container
PropTypeNotes
Classstringadds Tailwind utilities
Tagstringdiv, main, or section
Attrsattrs
Childrenchildren

ui.grid

Grid lays out children in a CSS grid with optional column wrappers.

Grid

Grid renders a display:grid container.

  • defaults
    Grid
  • layout.three-col
    Grid
  • layout.two-col
    Grid
PropTypeNotes
Classstringadds Tailwind utilities
Colsstringcolumn preset: 1–12 or responsive 1-2, 1-3, 1-4
Attrsattrs
Childrenchildren

GridCol

GridCol renders one grid column child.

  • defaults
    GridCol
PropTypeNotes
Classstringadds Tailwind utilities
Spanintcol-span-1..12
Startintcol-start-1..12
Endintcol-end-1..12
Orderintorder-1..12
Attrsattrs
Childrenchildren

ui.group

Group arranges children in a horizontal flex row. Supports fieldset for related form controls.

Group

Group renders a horizontal flex container.

  • defaults
    Group
  • gap.0
    Group
  • gap.2
    Group
  • gap.4
    Group
  • gap.6
    Group
  • gap.8
    Group
  • gap.10
    Group
  • gap.12
    Group
  • gap.auto
    Group
  • align.start
    Group
  • align.center
    Group
  • align.end
    Group
  • align.stretch
    Group
  • align.baseline
    Group
  • justify.start
    Group
  • justify.center
    Group
  • justify.end
    Group
  • justify.between
    Group
  • tag.default
    Group
  • tag.fieldset
    Group
PropTypeNotes
Gapstringsets gap: a Tailwind spacing step (0, 2, 4, 6, 8, 10, 12 = gap-N) or auto
Alignstringsets align
Justifystringsets justify
Classstringadds Tailwind utilities
Tagstringdiv, fieldset, or dl. Use fieldset for related form controls.
Attrsattrs
Childrenchildren

ui.icon

Icon renders a class-based span, svg use reference, or text fallback. Decorative icons are hidden from assistive technology by default.

Icon

Icon renders a class-based span, svg use, or text fallback host.

  • defaults
  • size.xs
  • size.default
  • size.md
  • size.lg
  • size.sm
  • size.xl
  • type.class
  • type.svg
  • type.text
PropTypeNotes
Namestringicon name appended to Prefix in class mode
Typestringsvg, text, or class (default)
BaseClassstringbase icon font class in class mode
Prefixstringicon font prefix in class mode
Sizestringsets density preset
Classstringadds Tailwind utilities
Hrefstringsvg use href in svg mode
Titlestringsvg title / accessible name
AriaLabelstringaccessible name for non-decorative icons
Decorativeboolhides the icon from assistive technology
Attrsattrs
Childrenchildren

ui.image

Image renders accessible img, picture, and source primitives. Use Decorative for purely visual images so alt stays empty.

Image

Image renders an accessible img element.

  • defaults
    Avatar
  • aspect.auto
  • aspect.square
  • aspect.video
  • fit.contain
  • fit.cover
  • fit.fill
  • fit.none
  • fit.scale-down
  • position.bottom
  • position.center
  • position.left
  • position.left-bottom
  • position.left-top
  • position.right
  • position.right-bottom
  • position.right-top
  • position.top
  • size.auto
  • size.default
  • size.full
  • size.xs
  • size.sm
  • size.md
  • size.lg
  • size.xl
  • variant.default
  • variant.logo
  • variant.avatar
  • variant.rounded
  • variant.thumbnail
  • layout.picture
PropTypeNotes
Variantstringsets appearance preset
Sizestringsets density preset
Classstringadds Tailwind utilities
Srcstring
SrcSetstring
Sizesstring
Altstringalternative text; ignored when Decorative
Widthstring
Heightstring
Fitstringobject-fit preset
Positionstringobject-position preset
Aspectstringaspect-ratio preset
Loadingstringeager or lazy (default lazy)
Decodingstringsync, auto, or async (default async)
FetchPrioritystring
Decorativeboolmarks the image as purely presentational
IDstring
Attrsattrs

Picture

Picture renders a responsive image wrapper.

  • defaults
    Picture
PropTypeNotes
Classstringadds Tailwind utilities
Attrsattrs
Childrenchildren

Source

Source renders a source candidate for picture, video, or audio.

  • defaults
  • layout.picture
PropTypeNotes
SrcSetstring
Srcstring
Mediastring
Typestring
Sizesstring
Attrsattrs

ui.inline

Inline renders inline copy as a span. Use Text for paragraph blocks and Title (as 1–6) for headings.

Inline

Inline renders a span element with inline copy classes.

  • defaults
    Inline
PropTypeNotes
Classstringadds Tailwind utilities
Attrsattrs
Childrenchildren

ui.label

Label associates visible text with a form control via the for attribute.

Label

Label renders accessible text linked to a control.

  • defaults
  • layout.with-control
PropTypeNotes
Classstringadds Tailwind utilities
HTMLForstringid of the labeled control
Attrsattrs
Childrenchildren

ui.linebreak

Break renders br or wbr for controlled inline wrapping.

Break

Break renders br by default, or wbr when Type is wbr/word.

  • defaults

  • type.br

  • type.wbr
PropTypeNotes
Typestringbr (default) or wbr/word
Classstringadds Tailwind utilities
Attrsattrs

ui.list

List renders semantic ul, ol, dl, or menu lists with ListItem children.

List

List renders a list container (ul, ol, dl, or menu).

  • defaults
      List
  • tag.dl
    List
  • tag.ol
      List
  • tag.ul
      List
PropTypeNotes
Classstringadds Tailwind utilities
Tagstringul, ol, dl, or menu
Attrsattrs
Childrenchildren

ListItem

ListItem renders one li with optional value attribute.

  • defaults
  • ListItem
  • tag.dl
  • ListItem
  • tag.ol
  • ListItem
  • tag.ul
  • ListItem
    • PropTypeNotes
    Classstringadds Tailwind utilities
    Tagstringli, dt, or dd; defaults to li
    Valueintoptional li value for ordered contexts
    Attrsattrs
    Childrenchildren

    ui.lucide-icon

    LucideIcon renders a Lucide glyph (ISC license) by kebab-case name from the generated registry specs/assets/lucide-icons.json. Decorative (aria-hidden) unless a Label is given.

    LucideIcon

    LucideIcon renders an svg glyph by name.

    PropTypeNotes
    Namestringkebab-case Lucide name; an unknown name draws a circle
    Sizeintwidth and height in px, 16 by default
    StrokeWidthintstroke width, 2 by default
    Labelstringaccessible name; without it the icon is decorative
    Classstringadds Tailwind utilities
    Attrsattrs

    ui.separator

    Separator renders a semantic or decorative hr.

    Separator

    Separator renders hr with optional decorative semantics.

    PropTypeNotes
    Variantstringsets appearance preset
    Orientationstringhorizontal or vertical
    Classstringadds Tailwind utilities
    Decorativeboolhides the rule from assistive technology
    Attrsattrs

    ui.stack

    Stack arranges children vertically in a flex column. Default layout primitive for spacing sections and form fields.

    Stack

    Stack renders a vertical flex container.

    PropTypeNotes
    Gapstringsets gap: a Tailwind spacing step (0, 2, 4, 6, 8, 10, 12 = gap-N) or auto
    Alignstringsets align
    Justifystringsets justify
    Classstringadds Tailwind utilities
    Tagstringdiv, ul, or ol. Use Block for landmarks (aside, section, header, nav).
    Attrsattrs
    Childrenchildren

    ui.text

    Text renders body copy: a paragraph by default; Tag picks another text element (blockquote, figcaption, address, pre, or an inline element). Title (as 1–6) is for headings.

    Text

    Text renders a p element with body copy classes, or the block or inline text element of `Tag`.

    PropTypeNotes
    Sizestringsets size
    Weightstringsets weight
    Classstringadds Tailwind utilities
    Tagstringp (default), blockquote, figcaption, address, pre, or an inline element (span, strong, em, ...)
    Attrsattrs
    Childrenchildren

    ui.title

    Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0 or out of range.

    Title

    Title renders the resolved heading element.

    PropTypeNotes
    Sizestringsets size
    Weightstringsets weight
    Classstringadds Tailwind utilities
    Asintmaps to h1–h6; 0 and 2 default to h2
    Attrsattrs
    Childrenchildren