Preview

Open in new tab

Filter surfaces

Help shoppers narrow the catalog without inventing the filter layout.

Filter blocks package facet groups, active chips, and merchandising notes.

Price

Under $200 / $200-$400 / Above $400

Material

Polycarbonate / Nylon / Recycled woven

Availability

In stock / Preorder / Limited run

Included patterns

• Facet groups

• Active filter chips

• Collection note row

Variants

Sidebar filters

Classic facet rail for larger catalogs.

Toolbar filters

Horizontal filter bar for tighter layouts.

Guided filters

Editorial filter entry for new collections.

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">Filter surfaces</Badge>
    <Heading level={1}>Help shoppers narrow the catalog without inventing the filter layout.</Heading>
    <Text as="p">Filter blocks package facet groups, active chips, and merchandising notes.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open filters</Button>
        <Button variant="outline">See category page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Price</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Under $200 / $200-$400 / Above $400</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Material</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Polycarbonate / Nylon / Recycled woven</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Availability</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">In stock / Preorder / Limited run</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Facet groups</Text>
        <Text as="p">• Active filter chips</Text>
        <Text as="p">• Collection note row</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Category Filters