Agencies + Brands Docs Components FAQ Workflow
Get access
In progress
ShopFront DS Code Parity
React parity of the Figma file — same tokens, same variants, same prop names.
131 Built in code
·
Radio Checkbox Currency Icons Country Flag Icons Icon Icons / Dawn Core
Standard Icon Mark
Image (Ratios)
Vertical Horizontal
Overlay Carousel Controls
Controls Pills
Zoom Control Back to Top (Text Inside) Back to Top (Text Below)
Simple Halo
Horizon Field Heading Rule Text-Rule Spacer Video / Platform Control Pictogram Product Price Style 3 Dropdown Control Atom
Icon Stars Summary
Favorite / Wishlist Heart Avatar Main Nav Item / Button Badge Announcement Nav Arrow Countdown Timer Badge Footer Nav Item
Chip Thumbnail
Item / Pill Item / Chip Item / Underline Item / Pointer Item / Folder Content Tab
Tag Filter Chip / Value Flyout Menu Pointer .Mega Menu Nav Item Stock Availability Availability Filter Chip 1 Filter Chip 2 Price Style 1 Price Style 2 Price Style 4 Product Badge 1 Product Badge 2 Product Badge 4 Stock Search Field 1 Search Field 2
With Label Traditional Binary + Icons
Message Simple Text & Icon Message Pictogram
Left Right Dawn
Left Right
Number Underlined Number Circle
Primary Fill Primary Outline Primary Text Arrows Close
Indicators / Dots Scroll Indicator (Horizon) Slideshow Controls Mobile (Horizon) Field / Input Base Field Title
Stepper Button Input Cell Min Max Input Number Input
Add to Cart Icon (Horizon)
Color / Circle Color / Square
Base Variant Search Currency Flag Currency Symbol Currency Stacked Language Full Language Compact Language Abbr Country Country Stacked
Qty / Stepper Compact Dynamic Cart Icon
Standard PDP FAQ Inset FAQ Icon Dawn
Button Group / PDP
Input Text Input Textarea Input / Create Password Variant Dropdown
Custom Horizon
Button Group Heading-Rule Headline Master
Filled Active Underline Active
Rule-Headline-Rule
Icon + Dismiss Policy + Locale Carousel + Link Store Locator Icon + CTA Promo Carousel Countdown + Link Flash Sale Countdown Centered Carousel 10 (Broadcast) 11 (Dawn + Horizon) 12 (Horizon)
Section / Marquee (Horizon)
Contact + Sign In Contact + Links + Sign In Brand Links + Sign In Brand + Cart + Promo Locale Selector B2B Contact + Links
Product Card / Media Flyout Menu / Container Master Bottom Drawer / Container Master Sheet / Container Master Dropdown Menu / Container Master Search Field / Segmented or Faceted Pagination (Dawn) Pagination (Broadcast) (Dawn) Pagination (B2B) (Dawn) Pagination Controls (Dawn)
Showing + Controller Displaying Results Text Links Load More Per-page (dropdown) Per-page (chips)
Standard Home Icon Back Link
Primary Image Top Simple 1 Col Simple 2 Col
B2B Quick Order Search Focused
B2B Header + Sub Nav
Dawn 7 (Horizon) 8 (Horizon) 9 (Broadcast)
2-Col + Featured Image 2-Col + Category Card 3-Col + USP Sidebar + CTA 3-Col + Image + CTA 3-Col + USP Grid 2-Col + 3 Category Cards 4-Col Image Top 1-Col + 3 Category Cards
Rating Testimonial Featured Product Blog Article Title Promotion Signup Category
Gradient Overlay Overlay Centered Overlay Positioned Image Above Image + Block
Type Scale Colors Spacing
Product Card Testimonial Card Content Card (Dawn) Content Card Content Card B2B Brand Logo Card