Preview

Settings screen pack

Ship settings screens with grouped sections and side summaries.

Settings screens combine fieldsets, detail lists, and navigation shells into one source-owned page.

Screen	Primary pattern	Summary
Workspace	Grouped fieldsets	Members + limits
Notifications	Toggle groups	Channel matrix
Billing	Summary + form	Owner and invoices

Built on: Fieldset, DescriptionList, Input, Select, Checkbox, and PageHeader.

Included patterns

• Grouped setting sections

• Status summary

• Owner / contact detail list

Variants

Workspace settings

Group account-level settings and member controls.

Notification settings

Preferences grouped by intent and channel.

Billing settings

Summary plus editable owner and contact fields.

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>Settings screen pack</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="#">General</Sidebar.Item>
            <Sidebar.Item href="#">Members</Sidebar.Item>
            <Sidebar.Item href="#">Notifications</Sidebar.Item>
            <Sidebar.Item href="#">Billing</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Ship settings screens with grouped sections and side summaries.</PageHeader.Title>
          <PageHeader.Description>Settings screens combine fieldsets, detail lists, and navigation shells into one source-owned page.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Screen</Table.Head>
              <Table.Head>Primary pattern</Table.Head>
              <Table.Head>Summary</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Workspace</Table.Cell>
              <Table.Cell>Grouped fieldsets</Table.Cell>
              <Table.Cell>Members + limits</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Notifications</Table.Cell>
              <Table.Cell>Toggle groups</Table.Cell>
              <Table.Cell>Channel matrix</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Billing</Table.Cell>
              <Table.Cell>Summary + form</Table.Cell>
              <Table.Cell>Owner and invoices</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built on</DescriptionList.Term>
        <DescriptionList.Description>Fieldset, DescriptionList, Input, Select, Checkbox, and PageHeader.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Grouped setting sections</Text>
        <Text as="p">• Status summary</Text>
        <Text as="p">• Owner / contact detail list</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui