Installation

Since Storefront UI is designed to fit seamlessly into your Tailwind CSS workflow, there will be different installation steps depending on your environment.

Playground

You can try out Storefront UI in your browser with our online playground.

Stackblitz playground

If you prefer video guides, we have a quick video that can help you set up Storefront UI in your Next.js project.

Create Your Next Project

If you don't already have a Next app, you can use the create-next-app command from Create Next App to get started.

# npm
npx create-next-app@latest

# yarn
yarn create next-app

# pnpm
pnpm create next-app

Install Tailwind and Storefront UI Dependencies

Next, you'll need to install Tailwind CSS and PostCSS, as well as the Storefront UI's React library and Tailwind preset.

# npm
npm i @storefront-ui/react
npm i -D tailwindcss postcss autoprefixer

# yarn
yarn add @storefront-ui/react
yarn add -D tailwindcss postcss autoprefixer

# pnpm
pnpm add @storefront-ui/react
pnpm add -D tailwindcss postcss autoprefixer

In Next.js 13 environments that are not using App Router there is an issue with Next.js not detecting ESM modules of subdependencies correctly.

As a workaround, you can add transpilePackages: ['@storefront-ui/react'] to your next.config.js configuration file:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@storefront-ui/react'],
};

module.exports = nextConfig;

Initialize Tailwind

Running Tailwind's init command will generate a tailwind.config.js and postcss.config.js file in your project's root directory.

npx tailwindcss init -p

Modify Your Tailwind Configuration File

Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your tailwind.config.js file.

Add a path to your installed package

In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your node_modules folder is located to the content property. In the example below, we're using the default location for node_modules, but this may change if you're working in a monorepo.

// tailwind.config.js
const { tailwindConfig } = require('@storefront-ui/react/tailwind-config');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [tailwindConfig],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@storefront-ui/react/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to Your CSS

Finally, you'll need to add CSS directives to add each Tailwind layer to src/app/globals.css. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS.

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

You're Ready to Go!

import { SfButton } from '@storefront-ui/react';

export default function ButtonBlock() {
  return <SfButton className="w-full">Hello</SfButton>;
}