Using the Styled Kit

CLI

Simply run the following command:

pnpm dlx qwik-ui init

(or "npx qwik-ui init" if you prefer npm)

This will help you install tailwind, create a qwik-ui.config.json file and modify your root/global css and tailwind config files with the necessary Qwik UI design system variables and values (see below)

Generating components using the CLI

When you want to add a component you can run:

pnpm qwik-ui add

Or if you know a specific component you want to add, let's say "input", you can run:

pnpm qwik-ui add input

Manual installation

Step 1: Install the Headless Kit and qwikest icons

pnpm i -D @qwik-ui/headless @qwikest/icons tailwindcss-animate

Step 2: copy/paste your theme config

Click on "make it yours" -> choose your favorite color theme and style -> copy/paste the css-variables config to your global css file.

For example, we use the following config by default on the Qwik UI docs:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 5.9% 10%;
    --card: 0 0% 100%;
    --card-foreground: 240 5.9% 10%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --primary: 0 93.5% 81.8%;
    --primary-foreground: 0 0% 0%;
    --secondary: 240 5.9% 10%;
    --secondary-foreground: 0 0% 100%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --alert: 0 84.2% 60.2%;
    --alert-foreground: 0 0% 98%;
    --ring: 240 5.9% 10%;
    --border-width: 0px;
    --border-radius: 0.5rem;
    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
    --transform-press: scale(0.95);
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --primary: 0 93.5% 81.8%;
    --primary-foreground: 0 0% 0%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 0 0% 0%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --alert: 0 84.2% 60.2%;
    --alert-foreground: 0 0% 98%;
    --ring: 240 4.9% 83.9%;
    --border-width: 0px;
    --border-radius: 0.5rem;
    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
    --transform-press: scale(0.95);
  }
}

Step 3: Modify your tailwind.config.js file

Finally, you need to modify your tailwind.config.js file:

const { join } = require('path');
const plugin = require('tailwindcss/plugin');
 
/** @type {import('tailwindcss').Config} */
 
module.exports = {
  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
  plugins: [
    require('tailwindcss-animate'),
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.press': {
          transform: 'var(--transform-press)',
        },
      });
    }),
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        alert: {
          DEFAULT: 'hsl(var(--alert))',
          foreground: 'hsl(var(--alert-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
      },
      borderRadius: {
        base: 'var(--border-radius)',
        sm: 'calc(var(--border-radius) + 0.125rem)',
        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
        md: 'calc(var(--border-radius) + 0.375rem)',
        lg: 'calc(var(--border-radius) + 0.5rem)',
        xl: 'calc(var(--border-radius) + 0.75rem)',
        '2xl': 'calc(var(--border-radius) + 1rem)',
        '3xl': 'calc(var(--border-radius) + 1.5rem)',
      },
      borderWidth: {
        base: 'var(--border-width)',
        DEFAULT: 'calc(var(--border-width) + 1px)',
        2: 'calc(var(--border-width) + 2px)',
        4: 'calc(var(--border-width) + 4px)',
        8: 'calc(var(--border-width) + 8px)',
      },
      boxShadow: {
        base: 'var(--shadow-base)',
        sm: 'var(--shadow-sm)',
        DEFAULT: 'var(--shadow)',
        md: 'var(--shadow-md)',
        lg: 'var(--shadow-lg)',
        xl: 'var(--shadow-xl)',
        '2xl': 'var(--shadow-2xl)',
        inner: 'var(--shadow-inner)',
      },
      strokeWidth: {
        0: '0',
        base: 'var(--stroke-width)',
        1: 'calc(var(--stroke-width) + 1px)',
        2: 'calc(var(--stroke-width) + 2px)',
      },
      animation: {
        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
      },
      keyframes: {
        'collapsible-down': {
          from: { height: '0' },
          to: { height: 'var(--qwikui-collapsible-content-height)' },
        },
        'collapsible-up': {
          from: { height: 'var(--qwikui-collapsible-content-height)' },
          to: { height: '0' },
        },
      },
    },
  },
};

This might seem like a lot of configuration, but we believe it to be worth it because it allows changing your entire application's theme at the click of a button.

Step 4: Find the components you need in the docs and copy/paste them into your project

You will find the components code in their corresponding link in the docs.

Bonus step: add a barrel file to ~/components/ui

export * from './accordion/accordion';
export * from './alert/alert';
export * from './avatar/avatar';
export * from './badge/badge';
export * from './breadcrumb/breadcrumb';
export * from './button/button';
export * from './card/card';
export * from './checkbox/checkbox';
export * from './combobox/combobox';
export * from './dropdown/dropdown';
export * from './input/input';
export * from './label/label';
export * from './modal/modal';
export * from './popover/popover';
export * from './progress/progress';
export * from './radio-group/radio-group';
export * from './separator/separator';
export * from './skeleton/skeleton';
export * from './tabs/tabs';
export * from './textarea/textarea';
export * from './select/select';
export * from './toggle/toggle';
export * from './toggle-group/toggle-group';

This way you can now import { Accordion, Alert, ... } from '~/components/ui'; 👯‍♀️

(small tip: you can comment out the components you don't use!)

Tailwind CSS IntelliSense VSCode extension

If you don't already have it, go ahead and install the Tailwind CSS IntelliSense extension for vscode.

Then, edit your settings.json with the following:

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

This will enable the extension to recognize the Qwik UI utility functions and give you the same autocompletion you get with the default Tailwind classes.

You can thank us later... 😉