Theme Playground

Component Showcase

Browse the full live showcase, including QuickLinks, DownloadItem, ColorSwatch, MaterialSelector, ProductUSP parity variants, and page composition examples.

QuickLinks docsMaterialSelector docs

Buttons

Primary actions, secondary options, and link-style recipes. Built-in variants cover the defaults, while background, foreground, and border let you compose more editorial or campaign-specific button treatments from theme tokens.

Controls
Variant
Size
Disabled
Icon
Label
Background
Foreground
Border

Built-in variants at a glance

Semantic recipes

Campaign CTA

Explicit fill, text, and stroke from theme tokens.

Bordered link button

Use outline when the CTA should stay lighter than a primary button.

Quiet pill link

Ghost plus a muted fill gives links a calmer editorial treatment.

Tinted soft action

Soft buttons can pick up campaign color without changing the layout recipe.

With icons

Sizes

JSX
import { StorefrontButton } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontButton variant="outline" size="md" foreground="var(--foreground)" border="var(--border)">
  Read the journal
</StorefrontButton>

Text Links

Inline and standalone text links with optional serif styling.

Controls
Link text
Serif text
Default linkSerif link

Inline example: Check our shipping policy for details.

JSX
import { StorefrontTextLink } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontTextLink href="#">Default link</StorefrontTextLink>

<StorefrontTextLink href="#" serif>
  Serif link
</StorefrontTextLink>

Mid Truncate

Keeps both the start and end of long product labels visible while collapsing the middle. Useful for variant-heavy product names and document rows.

Controls
Label
End length

Narrow width

Offshore Sailing Bib Trousers — Carbon Black / XL / GORE-TEX

Product list row

Offshore Sailing Bib Trousers — Carbon Black / XL / GORE-TEX
Ridge Knitted Hybrid Jacket — Midnight Navy / Large
Compact Travel Umbrella — Sand / One Size / UV Coated
JSX
import { MidTruncate } from '@enadhq/enad-react-sdk/client/ui/mid-truncate';

<MidTruncate endLength={14} className="max-w-[240px] text-sm font-medium">
  Offshore Sailing Bib Trousers — Carbon Black / XL / GORE-TEX
</MidTruncate>

Text Inputs

Text fields with labels, placeholders, icons, and disabled state.

Controls
Label
Placeholder
JSX
import { StorefrontInput } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontInput
  label="Email address"
  placeholder="you@example.com"
  type="email"
/>

<StorefrontInput
  label="Search products"
  placeholder="What are you looking for?"
  icon={<Icon name="search" className="size-4" />}
/>

Select

Dropdown pickers for single-value selection.

Controls
Label
JSX
import { StorefrontSelect } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontSelect
  label="Size"
  options={[
    { value: 'xs', label: 'XS' },
    { value: 's', label: 'Small' },
    { value: 'm', label: 'Medium' },
    { value: 'l', label: 'Large' },
    { value: 'xl', label: 'XL' },
  ]}
  value="m"
  onValueChange={setValue}
/>

Checkboxes

Boolean toggles for forms and settings.

Controls
Label 1
Label 2
Label 3
JSX
import { StorefrontCheckbox } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontCheckbox
  label="Subscribe to newsletter"
  checked={true}
  onCheckedChange={(v) => { /* handle change */ }}
/>

<StorefrontCheckbox
  label="I agree to the terms"
  checked={false}
  onCheckedChange={(v) => { /* handle change */ }}
/>

<StorefrontCheckbox
  label="Enable notifications"
  checked={false}
  onCheckedChange={(v) => { /* handle change */ }}
/>

Quick Links

Review both pill links and the new responsive card mode. Card mode behaves like a rail on mobile and wraps cleanly on desktop.

Controls
Link 1
Link 2
Link 3
Link 4

Responsive card mode

Default pill mode

JSX
import { QuickLinks } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<QuickLinks
  variant="cards"
  links={[
    {
      label: "Chairs",
      href: "#",
      image: { src: "https://placehold.co/236x236/ede7df/8a745f?text=Chairs", alt: "Chairs" },
      active: true,
    },
    {
      label: "Stools",
      href: "#",
      image: { src: "https://placehold.co/236x236/ece8e1/6f6258?text=Stools", alt: "Stools" },
    },
  ]}
/>

Download Items

Review both the original card presentation and the new inline document-row variant.

Controls
Item 1
Item 2
Item 3

Inline variant

Product Assembly GuidePDFCare InstructionsPDFTechnical SpecificationsXLSX

Default card variant

Product Assembly GuidePDF
Care InstructionsPDF
Technical SpecificationsXLSX
JSX
import { DownloadItem } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<DownloadItem label="Product Assembly Guide" url="#" fileType="PDF" variant="inline" />
<DownloadItem label="Care Instructions" url="#" fileType="PDF" variant="inline" />
<DownloadItem label="Technical Specifications" url="#" fileType="XLSX" variant="inline" />

Breadcrumbs

Hierarchical navigation trail.

Controls
Crumb 1
Crumb 2
Crumb 3
Crumb 4
JSX
import { StorefrontBreadcrumbs } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontBreadcrumbs
  items={[
    { label: 'Home', href: '/home' },
    { label: 'Furniture', href: '/furniture' },
    { label: 'Living Room', href: '/living-room' },
    { label: 'Sofas' },
  ]}
/>

Pagination

Page navigation for lists and search results.

JSX
import { StorefrontPagination } from '@enadhq/enad-react-sdk/client/storefront/primitives';

<StorefrontPagination
  currentPage={3}
  totalPages={12}
  onPageChange={setPage}
/>

Star Rating

Display and interactive star ratings at different sizes.

Static ratings

Small
Medium
Large

With value and review count

Interactive

Click to rate
JSX
import { StarRating } from '@enadhq/enad-react-sdk/client/storefront/components';

// Static
<StarRating rating={4.5} size="md" />

// With value and review count
<StarRating rating={3.8} showValue reviewCount={124} />

// Interactive
<StarRating
  rating={0}
  interactive
  onRate={setRating}
  size="lg"
/>

Badge

Status badges for product cards and detail pages.

DefaultSaleNewOut Of-StockFeaturedLimitedPremiumInfo
JSX
import { Badge } from '@enadhq/enad-react-sdk/client/storefront/components';

<Badge variant="default">Default</Badge>
<Badge variant="sale">Sale</Badge>
<Badge variant="new">New</Badge>
<Badge variant="out-of-stock">Out Of-Stock</Badge>
<Badge variant="featured">Featured</Badge>
<Badge variant="limited">Limited</Badge>
<Badge variant="premium">Premium</Badge>
<Badge variant="info">Info</Badge>

Price

Price display with sale pricing, discount badges, and locale formatting.

Regular price

SEK 12,990$99.9979,95 €

Sale price

SEK 12,990SEK 9,990-23%$99.99$49.99-50%

Without discount badge

SEK 9,990SEK 7,990
JSX
import { Price } from '@enadhq/enad-react-sdk/client/storefront/components';

// Regular price
<Price amount={12990} currency="SEK" />
<Price amount={99.99} currency="USD" locale="en-US" />

// Sale price
<Price amount={9990} original={12990} currency="SEK" />

// Without discount badge
<Price amount={7990} original={9990} currency="SEK" showDiscountBadge={false} />

Skeleton

Loading placeholders for content and product cards.

Basic skeletons

Product card skeletons

JSX
import { Skeleton, ProductCardSkeleton } from '@enadhq/enad-react-sdk/client/storefront/components';

// Basic skeletons
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-32 w-full rounded-lg" />
<Skeleton className="h-10 w-10 rounded-full" />

// Product card skeletons
<ProductCardSkeleton />