Preview

Settings asset

Group preferences and settings with a fieldset pattern designed for product screens.

Settings Groups packages legend, guidance copy, and content spacing into a kit-level asset.

Included patterns

• Legend + guidance

• Grouped form spacing

• Summary before controls

Notification group

Switches, checkboxes, and context copy inside one fieldset.

Billing group

Summary above inputs for owner or invoice updates.

Variants

Notification group

Preference grouping with explanatory copy.

Billing group

Owner and invoice preference section.

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 { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Settings asset</Badge>
    <Heading level={1}>Group preferences and settings with a fieldset pattern designed for product screens.</Heading>
    <Text as="p">Settings Groups packages legend, guidance copy, and content spacing into a kit-level asset.</Text>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Legend + guidance</Text>
        <Text as="p">• Grouped form spacing</Text>
        <Text as="p">• Summary before controls</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Grid columns={2} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Notification group</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Switches, checkboxes, and context copy inside one fieldset.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Billing group</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Summary above inputs for owner or invoice updates.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Copy settings groups</Button>
        <Button variant="outline">Pair with settings screen</Button>
    </Stack>
  </Stack>
</Container>