Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

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 editor extension

You can configure your code editor to recognize the Qwik UI utility functions. This gives you the same auto-completion that you get for the default Tailwind CSS classes.

Use the following configuration with your chosen editor:

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

You can thank us later... 😉

VSCode

The Tailwind CSS IntelliSense extension is available to download for VSCode.

Install it, open your settings.json file, and append the provided configuration.

JetBrains IDEs

The Tailwind CSS plugin is already bundled with JetBrains IDEs.

Click here to navigate to Settings > Languages & Frameworks > Style Sheets > Tailwind CSS, and append the provided configuration.