Preview

Open in new tab

Category page

Package discovery, filters, and product grids into a repeatable category page.

The category page example combines category header, filters, active chips, and product list layouts.

Category framing

Header plus collection or season note.

Facet filters

Sidebar or toolbar filter system.

Product grid

Editorial or dense listing pattern.

Built from: Category previews, product lists, and category filters.

Use this example for collection pages, search results, or merch drops.

Variants

Merch category

Category page with editorial category framing.

Dense catalog

Higher-density category page for larger assortments.

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, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Category page</Badge>
    <Heading level={1}>Package discovery, filters, and product grids into a repeatable category page.</Heading>
    <Text as="p">The category page example combines category header, filters, active chips, and product list layouts.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open category page</Button>
        <Button variant="outline">Use filters</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Category framing</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Header plus collection or season note.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Facet filters</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Sidebar or toolbar filter system.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Product grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Editorial or dense listing pattern.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Category previews, product lists, and category filters.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Text as="p">Use this example for collection pages, search results, or merch drops.</Text>
  </Stack>
</Container>

DRYui

Category Page Example