Installation

Install Qwik UI with your choice of package manager below:

npm i -D @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