storefront-kit

v0.2.2

Published

25 days 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

pnpm add storefront-kit

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}', // Add this line
  ],
  // ... your other config
};

2. Import Base Styles

Import the CSS variables in your JavaScript/TypeScript (recommended):

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

Or if importing in CSS, it must come before the Tailwind directives:

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

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

3. Install Fonts

Storefront Kit uses General Sans for headings (font-heading) and Inter for body text (font-body). You'll need to install these fonts in your project.

Download the fonts:

General Sans - Free from Fontshare
Inter - Free and open source

Next.js (App Router) setup with next/font:

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

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

const generalSans = localFont({
  src: [
    { path: './fonts/GeneralSans-Variable.woff2', style: 'normal' },
    { path: './fonts/GeneralSans-VariableItalic.woff2', style: 'italic' },
  ],
  variable: '--font-general-sans',
});

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

4. Use Components

import { Button } from 'storefront-kit';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Button variant="secondary" size="small">
        Small Button
      </Button>
    </div>
  );
}

Using Tailwind Utilities

Once configured, you can use all the custom Tailwind utilities from Storefront Kit:

<div className="bg-brand text-background">
  <h1 className="font-heading text-foreground">Hello World</h1>
  <p className="text-contrast-400">This uses the design system colors!</p>
</div>

Available color utilities:

bg-brand, text-brand, border-brand (and brand-background, brand-foreground)
bg-success, bg-error, bg-warning (each with -background and -foreground variants)
bg-background, bg-foreground
bg-contrast-100 through bg-contrast-500

Typography utilities:

font-heading - Heading font family (General Sans)
font-body - Body font family (Inter)

Customization

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

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

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

:root {
  --brand-lch: 0.6 0.2 250; /* OKLCH: lightness chroma hue */
  --foreground-lch: 0.18 0 0;
  --background-lch: 1 0 0;
  /* ... override any variables */
}

Alternative: Import styles in JavaScript and override variables in CSS:

// app/layout.tsx
import 'storefront-kit/styles';

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

:root {
  --brand-lch: 0.6 0.2 250;
  /* ... your custom values */
}

Either approach works—the JS import avoids potential CSS ordering issues, while the CSS import gives you explicit control over style order.

Documentation

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

TypeScript

Full TypeScript support with included type definitions.

License

MIT