Preview

Overlay patterns

Name the overlay patterns, not just the primitives.

Overlay surfaces turn Dialog, Drawer, and Popover into reusable product patterns.

Pattern	Best for	Density
Approval drawer	Longer reviews	High
Create dialog	Short forms	Medium
Context panel	Reference tasks	Low

Includes: Header/footer conventions, context summaries, and action placement.

Included patterns

• Primary action placement

• Secondary summary rail

• Compact support copy

Variants

Approval drawer

Slide-over workflow for review and approval.

Create dialog

Modal form for short creation flows.

Context side panel

More persistent secondary context surface.

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>Overlay patterns</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="#">Launch drawer</Sidebar.Item>
            <Sidebar.Item href="#">Create modal</Sidebar.Item>
            <Sidebar.Item href="#">Context panel</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Name the overlay patterns, not just the primitives.</PageHeader.Title>
          <PageHeader.Description>Overlay surfaces turn Dialog, Drawer, and Popover into reusable product patterns.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Pattern</Table.Head>
              <Table.Head>Best for</Table.Head>
              <Table.Head>Density</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Approval drawer</Table.Cell>
              <Table.Cell>Longer reviews</Table.Cell>
              <Table.Cell>High</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Create dialog</Table.Cell>
              <Table.Cell>Short forms</Table.Cell>
              <Table.Cell>Medium</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Context panel</Table.Cell>
              <Table.Cell>Reference tasks</Table.Cell>
              <Table.Cell>Low</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Includes</DescriptionList.Term>
        <DescriptionList.Description>Header/footer conventions, context summaries, and action placement.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Primary action placement</Text>
        <Text as="p">• Secondary summary rail</Text>
        <Text as="p">• Compact support copy</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui