Carousel
Carousel with default, responsive, and controller examples.
Default
With responsive breakpoints
With controller
Index: 0
Starts at index 2 (initialScrollIndex)
Full-width (1 slide per page)
90% width (peek of next slide)
FullWidth + ScrollIndex
Responsive: fullWidth on mobile, fixed on sm+
Container
Lg container with muted background; carousel inside default-width section.
Grid
Grid with padding + negative margin approach. Responsive columns and gaps.
Default (2 columns, gap 16)
Item 1
2 columns
Item 2
2 columns
Item 3
2 columns
Item 4
2 columns
Item 5
2 columns
Item 6
2 columns
4 columns
Item 1
4 columns
Item 2
4 columns
Item 3
4 columns
Item 4
4 columns
Item 5
4 columns
Item 6
4 columns
Responsive (2 → 3 → 4 columns)
Item 1
Responsive
Item 2
Responsive
Item 3
Responsive
Item 4
Responsive
Item 5
Responsive
Item 6
Responsive
Different row vs column gap
Item 1
rowGap 24, columnGap 8
Item 2
rowGap 24, columnGap 8
Item 3
rowGap 24, columnGap 8
Item 4
rowGap 24, columnGap 8
Item 5
rowGap 24, columnGap 8
Item 6
rowGap 24, columnGap 8
FlatListGrid (virtualized, 22 items)
Item 1
FlatList
Item 2
FlatList
Item 3
FlatList
Item 4
FlatList
Item 5
FlatList
Item 6
FlatList
Item 7
FlatList
Item 8
FlatList
Item 9
FlatList
Item 10
FlatList
Item 11
FlatList
Item 12
FlatList
Item 13
FlatList
Item 14
FlatList
Item 15
FlatList
Item 16
FlatList
Item 17
FlatList
Item 18
FlatList
Item 19
FlatList
Item 20
FlatList
Item 21
FlatList
Item 22
FlatList
Content Card
Content cards with thumbnail, title, series, description, and progress.
Carousel
Grid
8 Mins
Content Group Card
Content group cards with image-first layout and overlaid title.
Carousel
Series
Overtime
Series
Stereotypes
Series
Battle
Series
Overtime Bonus
Series
Sports Stereotypes
Series
Epic Battles
Grid
Series
Overtime
Series
Stereotypes
Series
Battle
Series
Overtime Bonus
Series
Sports Stereotypes
Series
Epic Battles
Image Card
Image cards with optional icon, badge, CTA, and link. Aspect-square layout with overlaid content.
Basic (title + subtitle only)
Basic Card
Image, title and subtitle only.
With icon
With Icon
Play or category icon.
With badge (variants)
New
Default Badge
Primary-style badge.
Series
Outline Badge
Outline variant.
Live
Destructive Badge
Alert or live badge.
With CTA button
With href (whole card link)
Link Card
Entire card is clickable.
Full combination (icon + badge + CTA)
Image
Patterns: small fixed, responsive (View + aspect-* + fill), container-constrained.
1. Small fixed (avatar/icon)
2. Responsive
3. Fill (container-constrained)
Static asset (responsive)
Buttons
All button variants and sizes.
Variants
Sizes
Text + icon (size variants)
All variants with icon
Loading with icon
Loading (toggle)
Disabled
Links
TextLink (inline), SmartLink (polymorphic), and Button with href.
TextLink — inline in paragraphs
This is a paragraph with an inline link in the middle.
SmartLink — Link, Pressable, or View
Button with href
Badges
All badge variants.
Variants
Default
Secondary
Destructive
Outline
Clickable
Popover
Floating panel with trigger.
Dialog
Modal dialog with trigger.
Accordion
Collapsible content sections.
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.
Select
Dropdown selection with trigger and options.
Alerts
Alert variants with icon, title, and description.
Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has no description.
Unable to process your payment.
Please verify your billing information and try again.
- • Check your card details
- • Ensure sufficient funds
- • Verify billing address
Toasts
All toast variants and sizes.
Icons
Custom and Lucide icons using className styling or explicit size/color props.
1. Styled with className (size + color) something else
DP Logo
12
8
4
YouTube
12
8
4
X
12
8
4
Email
12
8
4
Merch
12
8
4
Home
12
8
4
Film
12
8
4
2. size/color props directly on icon components
DP Logo
32
24
16
YouTube
32
24
16
X
32
24
16
Email
32
24
16
Merch
32
24
16
Home
32
24
16
Film
32
24
16
Pattern 1: variant prop
Semantic usage with ARIA roles. Best for headings and structured content.
Headings (with ARIA roles)
H1 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ
H2 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ
H3 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ
H4 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ
H5 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ
Titles
Title Large
Title
Title Small
Paragraphs
Paragraph Large
Paragraph Large 600
Paragraph
Paragraph 600
Paragraph Link
Paragraph Small
Paragraph Small 600
Paragraph XS
Paragraph XS 600
Labels
Label Large
Label Large 600
Label
Label 600
Label Small
Label Small 600
Label XS
Links
Link Text
Pattern 2: className
Utility usage for overrides and combining with other classes.
Headings (className with presets)
H1 Size (64px)
H2 Size (48px)
H3 Size (36px)
H4 Size (32px)
H5 Size (24px)
With color overrides
Title with primary color
Paragraph with muted color
Label with destructive color
Responsive text classes
Almost Athletes Podcast
View All
What's New In Store
Exclusive drops you can't find anywhere else
Browse Full Collection
Time to Upgrade?
Become part of something epic
Exclusive Content
Access members-only videos, behind-the-scenes footage, and extended cuts.
Join The Crew
Time to Upgrade?
Become part of something epic
Follow The Journey
Stay connected across all platforms
Don't Miss The Next Big Trick Shot!
Join the mailing list for exclusive tour updates, early ticket access, and behind-the-scenes content you won't find anywhere else.
Get exclusive updates on new tour dates, VIP packages, and special announcements
Get the Dude Perfect App
Watch your Crew. Track your streak. Join in anytime.
Don't Miss The Next Big Trick Shot!
Join the mailing list for exclusive tour updates, early ticket access, and behind-the-scenes content you won't find anywhere else.
Get exclusive updates on new tour dates, VIP packages, and special announcements
Get the Dude Perfect App
Watch your Crew. Track your streak. Join in anytime.