storefront-kit

v0.15.6

Published

16 hours ago

A collection of modern, accessible commerce UI components

0High
0Medium
0Low

hunterbecton

react components ui commerce button tailwind

Storefront Kit

A collection of modern, accessible commerce UI components built with React, TypeScript, and Tailwind CSS.

Requirements

React 18+ or 19+
Tailwind CSS 3+
Node.js 18+

Installation

# Install storefront-kit
pnpm add storefront-kit

# Install required peer dependencies
pnpm add react react-dom

# Install Tailwind CSS and plugins as dev dependencies
pnpm add -D tailwindcss tailwindcss-animate @tailwindcss/container-queries @tailwindcss/typography

Setup

1. Configure Tailwind

Add the Storefront Kit preset and content path to your tailwind.config.js:

import storefrontKit from 'storefront-kit/tailwind';

export default {
  presets: [storefrontKit],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/storefront-kit/dist/**/*.{js,mjs}', // required: scan component class names
  ],
};

2. Import Base Styles

Add the Storefront Kit styles and Tailwind directives to your global CSS file:

/* globals.css */
@import 'storefront-kit/styles';

@tailwind base;
@tailwind components;
@tailwind utilities;

Or import the styles in your JavaScript/TypeScript entry point and keep the Tailwind directives in your CSS:

// app/layout.tsx (Next.js) or main.tsx (Vite/React)
import 'storefront-kit/styles';

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

3. Install Fonts

Storefront Kit uses Plus Jakarta Sans for headings (font-heading) and Inter for body text (font-body). Both are available on Google Fonts.

Next.js (App Router):

// app/layout.tsx
import { Inter, Plus_Jakarta_Sans } from 'next/font/google';
import 'storefront-kit/styles';

const inter = Inter({ subsets: ['latin'], variable: '--sfk-font-body' });
const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ['latin'], variable: '--sfk-font-heading' });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${plusJakartaSans.variable}`}>
      <body>{children}</body>
    </html>
  );
}

4. Use Components

Monolith (single import, props-driven):

import { Button, Badge, Alert } from 'storefront-kit';

function App() {
  return (
    <div>
      <Button variant="primary">Add to Cart</Button>
      <Button variant="outline">View Details</Button>
      <Badge>New</Badge>
    </div>
  );
}

Composable (primitives for custom layouts):

import * as ProductCardPrimitive from 'storefront-kit/product-card';

function MyProductCard() {
  return (
    <ProductCardPrimitive.Root aspectRatio="5/6">
      <ProductCardPrimitive.Preview>
        <ProductCardPrimitive.Thumbnail>
          <ProductCardPrimitive.Image src="/product.jpg" alt="Product" />
        </ProductCardPrimitive.Thumbnail>
        <ProductCardPrimitive.Link href="/products/1" aria-label="View product" />
      </ProductCardPrimitive.Preview>
      <ProductCardPrimitive.Details>
        <ProductCardPrimitive.Header>
          <ProductCardPrimitive.Title>Product Name</ProductCardPrimitive.Title>
          <ProductCardPrimitive.Price price={{ type: 'default', value: '$19.99' }} />
        </ProductCardPrimitive.Header>
      </ProductCardPrimitive.Details>
    </ProductCardPrimitive.Root>
  );
}

Tailwind Utilities

The preset adds design system utilities you can use throughout your app:

<div className="bg-brand text-background">
  <h1 className="font-heading text-foreground">Hello World</h1>
  <p className="font-body text-contrast-400">Body text</p>
</div>

Color utilities:

| Token | Tailwind classes | |---|---| | Brand | bg-brand, bg-brand-background, bg-brand-foreground | | Success | bg-success, bg-success-background, bg-success-foreground | | Error | bg-error, bg-error-background, bg-error-foreground | | Warning | bg-warning, bg-warning-background, bg-warning-foreground | | Neutral | bg-background, bg-foreground | | Contrast | bg-contrast-100 through bg-contrast-500 |

Typography utilities:

font-heading — Plus Jakarta Sans
font-body — Inter

Customization

Override CSS variables to customize the design system. Color variables use OKLCH format (lightness chroma hue):

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sfk-brand-lch: 0.6 0.2 250;        /* OKLCH: lightness chroma hue */
  --sfk-foreground-lch: 0.18 0 0;
  --sfk-background-lch: 1 0 0;
  /* Override any variable from storefront-kit/styles */
}

Documentation

For detailed component documentation, examples, and interactive demos, visit our Storybook.

License

MIT