Installation

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

Create Your Next Project

If you don't already have a Qwik application, you can use the create qwik@latest command.
Here is the Qwik official docs.

# npm
npx create qwik@latest

# yarn
yarn create qwik@latest

# pnpm
pnpm create qwik@latest

Install Tailwind and Storefront UI Dependencies

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

Run these commands form your project folder.

# npm
npm qwik add tailwind
npm i -D @storefront-ui/tailwind-config
npm i qwik-storefront-ui

# yarn
yarn qwik add tailwind
yarn add -D @storefront-ui/tailwind-config
yarn add qwik-storefront-ui

# pnpm
pnpm qwik add tailwind
pnpm add -D @storefront-ui/tailwind-config
pnpm add qwik-storefront-ui

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/tailwind-config');

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

You're Ready to Go!

Now, you can import Storefront UI components in your app from the qwik-storefront-ui in your project.

import { component$ } from '@builder.io/qwik';
import { SfButton } from 'qwik-storefront-ui';

export default component$(() => {
  return (
    <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
      <SfButton type="button" size="sm">
        Hello
      </SfButton>

      <SfButton type="button" size="base">
        Hello
      </SfButton>

      <SfButton type="button" size="lg">
        Hello
      </SfButton>
    </div>
  );
});