Preview

Feature showcase

Show features in action with tabbed video walkthroughs.

Tabbed Video Showcase compositions use Tabs, VideoEmbed, Button, and Stack for interactive feature demonstration sections.

2

tab layouts

3

video providers

5

feature slots

Default

Horizontal tabs

Top tab bar with large video area and supporting copy below.

Vertical tabs

Left sidebar tabs with video right and expandable descriptions.

Optimized for: Product tours, feature pages, and solution detail sections.
Requires: VideoEmbed component for lazy-loaded video playback.

Included patterns

• Tab-driven video switching

• Lazy video loading

• Feature description copy

• CTA per feature tab

Variants

Horizontal tabs with video

Tab bar above video with feature descriptions.

Vertical tabs with video

Side tab list with video player and feature copy.

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">Marketing</Badge>
    <Heading level={1}>Show features in action with tabbed video walkthroughs.</Heading>
    <Text as="p">Tabbed Video Showcase compositions use Tabs, VideoEmbed, Button, and Stack for interactive feature demonstration sections.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Use video showcase</Button>
        <Button variant="outline">See feature patterns</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">tab layouts</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">video providers</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">feature slots</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={2} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Default</Badge>
            <Heading level={3}>Horizontal tabs</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Top tab bar with large video area and supporting copy below.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Vertical tabs</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Left sidebar tabs with video right and expandable descriptions.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Optimized for</DescriptionList.Term>
        <DescriptionList.Description>Product tours, feature pages, and solution detail sections.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Requires</DescriptionList.Term>
        <DescriptionList.Description>VideoEmbed component for lazy-loaded video playback.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Tab-driven video switching</Text>
        <Text as="p">• Lazy video loading</Text>
        <Text as="p">• Feature description copy</Text>
        <Text as="p">• CTA per feature tab</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Tabbed Video Feature Showcase