Preview

List surfaces

Turn raw records into designed queues and review surfaces.

List surfaces package table, summary, and queue framing so product teams can start from a clear layout.

Queue	Owner	SLA
Launch approvals	Elena	2h
Brand reviews	Damon	4h
Billing changes	Priya	1d

Designed for: Ops queues, customer lists, release reviews, and activity feeds.

Included patterns

• Dense row hierarchy

• Summary rail

• Action-ready list framing

Variants

Review queue

List treatment for approvals and moderation.

Activity feed

List of updates, events, or incidents.

Table + detail rail

Table surface with summary context.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>List surfaces</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">All items</Sidebar.Item>
            <Sidebar.Item href="#">Pending</Sidebar.Item>
            <Sidebar.Item href="#">Needs review</Sidebar.Item>
            <Sidebar.Item href="#">Archive</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Turn raw records into designed queues and review surfaces.</PageHeader.Title>
          <PageHeader.Description>List surfaces package table, summary, and queue framing so product teams can start from a clear layout.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Queue</Table.Head>
              <Table.Head>Owner</Table.Head>
              <Table.Head>SLA</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Launch approvals</Table.Cell>
              <Table.Cell>Elena</Table.Cell>
              <Table.Cell>2h</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Brand reviews</Table.Cell>
              <Table.Cell>Damon</Table.Cell>
              <Table.Cell>4h</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Billing changes</Table.Cell>
              <Table.Cell>Priya</Table.Cell>
              <Table.Cell>1d</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Ops queues, customer lists, release reviews, and activity feeds.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Dense row hierarchy</Text>
        <Text as="p">• Summary rail</Text>
        <Text as="p">• Action-ready list framing</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui