Edit Profile

Dark Mode

Copy config

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

Installation

Install Qwik UI with your choice of package manager below:

npm install @qwik-ui/headless

Meta-framework guides

Qwik CityAstro

Building Blocks

Each component includes a building blocks section, which provides a barebones example of the component. This can be used as a starting point for implementing the component from scratch.

Below is an example of the Accordion component's building block:

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

export default component$(() => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.Header>
          <Accordion.Trigger>Title</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Content</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
});

We will use this example as a Qwik UI component in each guide.

Qwik City

To create a Qwik city app, run the following command:

npm create qwik@latest

Let's select the empty app option in the CLI to keep it simple. And remember, choosing the dad joke is not optional - it's mandatory! We have a highly sophisticated Dad Joke Detection System (DJDS) in place, so we'll know if you didn't!

Below is the Qwik City project structure. Inside of the src directory, let's create a new folder called accordion. Then, a file named accordion.tsx inside of src/components.

Qwik City files ├─ .eslintignore ├─ .eslintrc.cjs ├─ .gitignore ├─ .prettierignore ├─ README.md ├─ package-lock.json ├─ package.json ├─ public │ ├─ favicon.svg │ ├─ manifest.json │ └─ robots.txt ├─ src │ ├─ components │ │ └─ accordion │ │ └─ accordion.tsx │ │ └─ router-head │ │ └─ router-head.tsx │ ├─ entry.dev.tsx │ ├─ entry.preview.tsx │ ├─ entry.ssr.tsx │ ├─ global.css │ ├─ root.tsx │ └─ routes │ ├─ index.tsx │ ├─ layout.tsx │ └─ service-worker.ts ├─ tsconfig.json └─ vite.config.ts

Now, to create a component, you can simply copy/paste the code from the building blocks section, or the snippet provided in the code tab below 👇

Hooray! We've now added our first Qwik UI component in Qwik City. It includes a starting point where the accordion functionality and aria behavior is added for us.

Let's add a few styles to make the component stand out more, we'll use Tailwind CSS as a styling solution.

Astro

To set up an Astro application, add the following command in the terminal:

npm create astro@latest

Add a relative path for your project, and select the empty option in the CLI.

Next, let's add the @qwikdev/astro integration. This integration allows us to leverage resumability and Qwik components inside of Astro.

Run the following command in the terminal:

npx astro add @qwikdev/astro

Then, let's make sure we use Qwik as our main jsxImportSource in tsconfig.json. Otherwise, it will not get the proper Qwik types.

{
    "extends": "astro/tsconfigs/strict",
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "@builder.io/qwik"
    }
}

Under the src directory, let's create a folder called components. Similar to the Qwik City guide, we'll create a folder named accordion, and a file named accordion.tsx.

Below is the project structure with this in place.

Astro files ├─ .gitignore ├─ README.md ├─ astro.config.mjs ├─ package-lock.json ├─ package.json ├─ public │ └─ favicon.svg ├─ src │ ├─ env.d.ts │ └─ pages │ ├─ components │ │ └─ accordion │ │ └─ accordion.tsx │ └─ index.astro └─ tsconfig.json

Once again, let's copy our building-blocks example from above.

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

export default component$(() => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.Header>
          <Accordion.Trigger>Title</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Content</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
});

And we'll spice it up a bit using some vanilla CSS.

Tom's bookshelf