Skip to main content
View as Markdown

Display Components

Display components present static or structural content that is not bound to a table data source: hard-coded tables, empty states, scroll areas, chat speech bubbles, scrolling marquees, accordions, and tab containers. All accept the shared props bag plus visibility and responsive modules.

app.yaml
components:
  - type: static-table
    tableHeaders: [Plan, Price, Seats]
    tableRows:
      - [Free, '$0', '1']
      - [Pro, '$29', '10']
    caption: 'Pricing tiers'

static-table

A table populated from inline data (not a data source).

Property Description
tableHeaders Column header labels.
tableRows Row data as an array of string arrays.
caption Caption text displayed above or below the table.

empty-state

A placeholder shown when there is nothing to display.

Property Description
icon Lucide icon name for the illustration.
title Title text.
description Supporting text below the title.
children Optional call-to-action components.

scroll-area

A scrollable region with custom scrollbars.

Property Description
orientation Scroll axis: vertical, horizontal, or both.
maxHeight CSS max-height for the area (e.g. 400px).
children The scrollable content.

speech-bubble

A chat-style message bubble (used in conversation UIs).

Property Description
content The message text.
props HTML attributes — typically className for sender alignment/color.

list-item

A single list-item element, used as a building block inside lists and menus.

Property Description
content Inline content.
children Nested components.
props HTML attributes.

marquee

A band of children on a continuously scrolling track. Use it to show more items than fit on screen — a row of app screenshots, a set of logos — as a demonstration rather than a static grid. The children are duplicated internally so the loop has no visible seam; the duplicate is hidden from assistive technology, so each item is announced once.

Property Description
marqueeDirection Scroll direction: left, right, up, or down (default left).
marqueeSpeed Seconds for one full loop. Larger is slower.
marqueeGap CSS length between items, e.g. 2rem or 24px.
pauseOnHover Pause while the pointer is over the band, and while a child holds keyboard focus.
marqueeFade Fade the leading and trailing edges, so items appear to enter and leave.
pauseControl Render an explicit pause and resume button.
children The components to scroll.
app.yaml
components:
  - type: marquee
    marqueeDirection: right
    marqueeSpeed: 30
    marqueeGap: 2rem
    pauseOnHover: true
    marqueeFade: true
    children:
      - type: link
        props:
          href: /apps/invoicing
        content: Invoicing
      - type: link
        props:
          href: /apps/recruiting
        content: Recruiting

Give the reader a way to stop it

Content that moves for more than a few seconds needs to be stoppable (WCAG 2.2.2). Set pauseOnHover, pauseControl, or both. pauseOnHover covers a pointer and keyboard focus — hover alone leaves a keyboard user chasing a link that scrolls out from under them. pauseControl covers the visitor who has neither.

Visitors who ask their system for reduced motion get no loop at all. Nothing is hidden from them: every item stays reachable and the band stays scrollable by hand, so they lose the animation and nothing else.

accordion

Collapsible content sections. (Also documented in Content Components.)

Property Description
type single or multiple open sections.
defaultOpen IDs of items open by default.
children The accordion items.

tabs

A tabbed container holding tab-panel children. (Also documented in Navigation Components.)

Property Description
orientation Trigger layout: horizontal or vertical.
defaultValue ID of the tab active by default.
children The tab-panel components.

Last updated August 11, 2026

Edit this pageReport an issue

This documentation was written with AI, so errors or outdated content are possible. Sovrium is in beta. Contributions and corrections are welcome.

Built with Sovrium