Why is there a need for another framework? the current approach is not producing fast sites, and this problem will not disappear by waiting for a faster CPU.

Foreword

Qwik in Action

Introduction to the frontend development. Now, the responsibility of creating good or bad applications depends on you because the means available are all there.

Introduction

Overview of TypeScript. TypeScript introduced types into an untyped language like Javascript to ensure code consistency.

TypeScript

Overview of the frontend architectures. In this lesson you will understand the difference from Client Side Rendering and Multi Page Application.

Frontend architectures

Overview of the hydration. In this lesson you will understand the difference from Hydration and Island architecture/Partial Hydration.

Hydration

React Server Component. In this lesson you will understand the difference from Server Component and Client Component.

React Server Component

Qwik resumability will change the frontend ecosystem, In this lesson you will understand why is so great.

Resumability, the Qwik way

Wrap up of frontend architectures module.

Summary Chapter 2

In this lesson you will be able to understand more about performance and you will understand how improve your application with less JavaScript.

Qwik, the framework built on top of closure-extraction

Resumability is the core concept behind Qwik. In this lesson you will understand better the process.

Resumability

Code Extraction is a topic hard to master, you will understand how it works with different approaches.

Code Extraction

JSX syntax is the most famous one because of React, but what about the other frameworks, Vue, Angular?

Why Qwik use JSX syntax

Summary Chapter 3

Let's see together the fundamentals of Qwik. In this lesson you will compare Webpack and Vite.

Getting started with Qwik

The Qwik build process is so important because the resumability process requires correct and intelligent bundling.

Qwik compilation Process

Qwik CLI and amazing tool to have a great Developer Experience with Qwik.

Technical requirements to start a new Qwik application

Qwik Middleware an easy and clever way to expose your RESTful APIs or GraphQL APIs.

Middleware

Wrap up of Getting Started with Qwik module.

Summary Chapter 4

In this lesson you will learn the pillars of SEO. You will lean few new terms and metrics that can help you to measure your application.

In this lesson you will learn the some new things about SEO and crawler.

Sitemap and robots files

Partytown an amazing library to execute third scripts in the service worker.

Partytown

Core Web Vitals are so important for own application. You will learn in detail all the metrics.

Core Web Vitals

Core Web Vitals Labs Data vs Field Data. These two information are so different, let's figure out the peculiarity of those.

Labs data vs Field data

Summary Chapter 5

SEO and Core Web Vitals

There are many ways to deploy a Qwik application. You can have your own server and deploy your Qwik application easily with the Qwik CLI and integrations.

Deploy Qwik in production

Cloud solution are a good alternative for a low cost pipeline and host. Nowadays these kind of services are so smart and great, you should try them.

Cloud solutions

With different team and many developers, it's important to master branching strategies to avoid problems during your day by day.

Branching strategies

Progressive Web App approach can be an alternative to the stores. You can publish you application with a lot of benefit with PWA.

Progressive Web App

Wrap up of Deploy Qwik in Production module.

Summary Chapter 6

Style an application is so important let's see how engage your Stakeholders into this process.

Style and render data with Qwik

CSS is so huge, there are a lot of ways to style your application with Qwik, let's see them together.

CSS and Built-In Styling Methods

Tailwind is an amazing library, let's see together how master it. I will share you some tips and tricks to use Tailwind in a better way.

Tailwind CSS

In this lesson you will learn how manage data with Qwik. There are a lot of APIs to explore, let's jump into the code.

Managing data with Qwik

Summary Chapter 7

In this lesson you will learn how architect a modern frontend end application.

Creating an e-commerce with Qwik and Supabase

In this lesson you will learn the trade offs of technical decisions. I share with you some tips and tricks.

Technological spike

In this lesson you will explore Supabase. This is an amazing service to leverage your business.

Supabase for your backend

A custom authentication is too complex and risky to implement from scratch. Let's use the Supabase auth to optimize our goals.

Let's talk about the Authentication process

Summary Chapter 8

Supabase CLI an handy tool to improve consistency across environments.

Supabase CLI

Let's use the Supabase CLI to manage our database migrations and schemas.

Supabase db migrations

In this lesson you will create the e-commerce homepage with the Supabase client to read the data.

Show products on our homepage

Every e-commerce has a detail page, let's create our product detail page with Qwik.

Product Detail

Cache is really useful and in this lesson I will explain in the detail how it works. I will share my experience in this topic with some cool analogies.

Cache-control headers

Summary Chapter 9

Rendering products with Orama full text search

Let's improve out application with a useful "Add to favorites" feature.

Add a product to your favorites list

In this lesson you will learn how to use Stripe to manage your payments in a secure way.

Adding cart and checkout process with Stripe

Let's try the Supabase database function. This is an easy way to allows us to do several things and also add some logic to our procedure.

Page views tracking

A real-time database with Supabase is so simple to implement, let's build together a new functionality with this great feature.

Real-time database

Summary Chapter 10

Let's explore together the benefit of testing. In this lesson you will explore the various types of tests, Unit Test, E2E, Visual regression tests and more.

Overview of application testing

Let's discuss together how and when testing is valuable for our business. 3X Explore/Expand/Extract can help us is this reasoning.

How much testing is enough? When do I write tests?

In this lesson you will lean the Test driven development TDD flow. It's a really good practice to put in place.

Test-Driven Development (TDD)

In this lesson you will lean how test your components with Cypress.

Let's add some tests with Cypress

Do you need a Qwik component library? Qwik UI is the project for you because can give you a lot of Qwik accessible components out of the box.

Qwik UI

Summary Chapter 11

Adding tests to our Qwik application

Let's explore a bit of history of Qwik. A new framework with a great past.

Final thoughts

Qwik and React together, no problem, qwikify$ is the API to solve your problems.

qwikify$

Qwik and Astro together, no problem, @qwikdev/astro is the library to solve your problems.

Qwik inside Astro application

Qwik and micro-frontends together, no problem, out of the box Qwik can manage this scenario with no external dependencies.

Micro-frontends with Qwik

Summary chapter 12

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

250+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

( the primaryDescriptionMarkdown is long - several lines, include images, as long as you want )

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

In <the length of these lessons> we cover <three salient points about what we cover. Your BEST points>. Its <however long it is> and comes with <these bonus features, and reasons to buy. code, etc.>

It's taught by <author name> who <credibility, reason you should listen to them>. <social proof, if you have it yet>

<then you can list other supporting stuff you want to add, anything you want here>

-------
Example:
-------

We created a free course to create your first GraphQL server (from scratch) using Node and TypeScript. TypeScript and GraphQL are a powerful combo, but there's a lot of confusing edges if you're getting it setup the first time.

In this course we cover the basics of getting TypeScript setup with Node, how GraphQL works, and how to set up a GraphQL server using Apollo server. It's two hours long, it comes with complete code examples, and we walk through the code step-by-step.

It's taught by my friend, Shopify-engineer Hassan Djirdeh and he's integrated what he's learned using GraphQL in production as an engineer at Shopify. We've already had over 1,300 students enroll and it's been getting great reviews so far.

// ... and so on

Harness Qwik Resumable Architecture for Lightning-Fast Startup Times

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

( the summary is short - one or two lines )

Complete Guide to Qwik

At the end of 2022, thanks to the community, the 

 project was born, a library of components dedicated to and implemented on Qwik. To use the Qwik API and define and experiment with best practices in using Qwik. The last few years have allowed us to significantly improve the framework's codebase. By developing a series of low-level components, we touch on borderline cases and also use the various library integrations. This helped and still helps the ecosystem. The idea is that of a library of components that are provided in the form of a Headless Kit, therefore a series of bare-bones components where we can insert our styles independently. The library is still in the beta phase and other kits will almost certainly be released shortly, this will allow end users to not worry about defining the style for our components. So for example, the kit that Tailwind uses behind the scenes could come out and you just need to import the component. Let's see an example of components to understand how this can be implemented. Already in the previous chapters, with the creation of a button, we have seen an example of creating an internal library of components. Here it is very similar, except that a series of properties must be designed in advance to be useful to everyone.

import {
  AccordionContent,
  AccordionHeader,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from "@qwik-ui/headless";
import SVG from "./svg";

export default component$(() => {
  return (
    <>
      <div class="flex w-full justify-center">
        <AccordionRoot
          animated
          enhance={true}
          class="w-[min(400px,_100%)]"
        >
          <AccordionItem class="border-b">
            <AccordionHeader as="h3">
              <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
                <span>
                  Can I add headings inside the accordion?
                </span>
                <span class="pl-2">
                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                </span>
              </AccordionTrigger>
            </AccordionHeader>
            <AccordionContent class="accordion-animation-1 overflow-hidden">
              <p class="pb-4">
                Yes, if you wrap the{" "}
                <strong>AccordionHeader</strong> component
                around the trigger, screen readers will
                announce it properly.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem class="border-b">
            <AccordionHeader as="h3">
              <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
                <span>Is it easy to animate?</span>
                <span class="pl-2">
                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                </span>
              </AccordionTrigger>
            </AccordionHeader>
            <AccordionContent class="accordion-animation-1 overflow-hidden">
              <p class="pb-4">
                Yup! You can even use animations or CSS
                transitions using the{" "}
                <strong>animated</strong> prop on the
                accordion root!
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem class="border-b">
            <AccordionHeader as="h3">
              <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
                <span>
                  How about opening multiple items?
                </span>
                <span class="pl-2">
                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                </span>
              </AccordionTrigger>
            </AccordionHeader>
            <AccordionContent class="accordion-animation-1 overflow-hidden">
              <p class="pb-4">
                You can do that by setting the{" "}
                <strong>behavior</strong> prop to "multi" on
                the Accordion
              </p>
            </AccordionContent>
          </AccordionItem>
        </AccordionRoot>
      </div>
    </>
  );
});

Here we see that, to give maximum customization to the end user who will use the component, various components have been defined. We see them listed in the initial imports, and together they make up the final result. These components are in fact 

.
Tailwind was used to add style to these headless components, but let's analyze them to understand how you can go into such detail to create something complex.

import { accordionRootContextId } from './accordion-context-id';
import { type AccordionRootContext } from './accordion-context.type';

export type AccordionRootProps = {
	behavior?: 'single' | 'multi';
	animated?: boolean;
	enhance?: boolean;
	collapsible?: boolean;
	onSelectedIndexChange$?: PropFunction<(index: number) => void>;
	onFocusIndexChange$?: PropFunction<(index: number) => void>;
} & QwikIntrinsicElements['div'];

export const AccordionRoot = component$(
	({
		collapsible = true,
		behavior = 'single',
		animated = false,
		onSelectedIndexChange$,
		onFocusIndexChange$,
		...props
	}: AccordionRootProps) => {
		const rootRef = useSignal<HTMLDivElement | undefined>();
		const rootElement = rootRef.value;
		const currFocusedTriggerIndexSig = useSignal<number>(-1);
		const currSelectedTriggerIndexSig = useSignal<number>(-1);
		const selectedTriggerIdSig = useSignal<string>('');
		const triggerElementsSig = useSignal<HTMLButtonElement[]>([]);

		useTask$(({ track }) => {
			track(() => currSelectedTriggerIndexSig.value);

			if (onSelectedIndexChange$) {
				onSelectedIndexChange$(currSelectedTriggerIndexSig.value);
			}
		});

		useTask$(({ track }) => {
			track(() => currFocusedTriggerIndexSig.value);
			if (onFocusIndexChange$) {
				onFocusIndexChange$(currFocusedTriggerIndexSig.value);
			}
		});

		const updateTriggers$ = $(() => {
			if (!rootElement) {
				return;
			}

			// needs to grab a new array when adding or removing elements dynamically.
			const getLatestTriggers = Array.from(
				rootElement.querySelectorAll('[data-trigger-id]')
			) as HTMLButtonElement[];

			triggerElementsSig.value = getLatestTriggers.filter((element) => {
				if (element.getAttribute('aria-disabled') === 'true') {
					return false;
				}

				return true;
			});
		});

		const focusPreviousTrigger$ = $(() => {
			[...]
		});

		const focusNextTrigger$ = $(() => {
      [...]
		});

		const focusFirstTrigger$ = $(() => {
			[...]
		});

		const focusLastTrigger$ = $(() => {
			[...]
		});

		// takes a role call of its children (reactive b/c it's a signal)
		useVisibleTask$(function reIndexTriggers() {
			updateTriggers$();
		});

		const contextService: AccordionRootContext = {
			updateTriggers$,
			focusFirstTrigger$,
			focusPreviousTrigger$,
			focusNextTrigger$,
			focusLastTrigger$,
			currFocusedTriggerIndexSig,
			currSelectedTriggerIndexSig,
			selectedTriggerIdSig,
			triggerElementsSig,
			collapsible,
			behavior,
			animated,
		};

		useContextProvider(accordionRootContextId, contextService);

		return (
			<div {...props} ref={rootRef}>
				<Slot />
			</div>
		);
	}
);

Meanwhile, we can notice that in this long component at the end, we have inserted a 

 which allows you to render the other components that are enclosed within 

. Furthermore, if we go to the beginning of the file we have different properties that are used to cover different cases and satisfy all end users.

Here are the properties that this component accepts:

In addition to the methods that will be used to make the component dynamic, there is 

useContextProvider(accordionRootContextId, contextService);

 which is used to create a context to be used in the other components.

import { accordionItemContextId } from "./accordion-context-id";
import { type AccordionItemContext } from "./accordion-context.type";

export type AccordionItemProps = {
  defaultValue?: boolean;
} & QwikIntrinsicElements["div"];

export const AccordionItem = component$(
  ({
    defaultValue = false,
    id,
    ...props
  }: AccordionItemProps) => {
    const localId = useId();
    const itemId = id || localId;

    const isTriggerExpandedSig =
      useSignal<boolean>(defaultValue);

    const itemContext: AccordionItemContext = {
      itemId,
      isTriggerExpandedSig,
      defaultValue,
    };

    useContextProvider(accordionItemContextId, itemContext);

    return (
      <div
        id={itemId}
        data-type="item"
        data-item-id={itemId}
        {...props}
      >
        <Slot />
      </div>
    );
  }
);

---
title: Qwik UI
description: Do you need a Qwik component library? Qwik UI is the project for you because can give you a lot of Qwik accessible components out of the box.
---

# Qwik UI

At the end of 2022, thanks to the community, the [Qwik UI](https://qwikui.com/) project was born, a library of components dedicated to and implemented on Qwik. To use the Qwik API and define and experiment with best practices in using Qwik. The last few years have allowed us to significantly improve the framework's codebase. By developing a series of low-level components, we touch on borderline cases and also use the various library integrations. This helped and still helps the ecosystem. The idea is that of a library of components that are provided in the form of a Headless Kit, therefore a series of bare-bones components where we can insert our styles independently. The library is still in the beta phase and other kits will almost certainly be released shortly, this will allow end users to not worry about defining the style for our components. So for example, the kit that Tailwind uses behind the scenes could come out and you just need to import the component. Let's see an example of components to understand how this can be implemented. Already in the previous chapters, with the creation of a button, we have seen an example of creating an internal library of components. Here it is very similar, except that a series of properties must be designed in advance to be useful to everyone.

## Accordion component

Let's see the `Accordion` component together.

![accordion](https://d2uusema5elisf.cloudfront.net/courses/complete-guide-to-qwik/module_11/lesson_11.05/public/assets/accordion.png)

```tsx
import {
  AccordionContent,
  AccordionHeader,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from "@qwik-ui/headless";
import SVG from "./svg";

export default component$(() => {
  return (
    <>
      <div class="flex w-full justify-center">
        <AccordionRoot
          animated
          enhance={true}
          class="w-[min(400px,_100%)]"
        >
          <AccordionItem class="border-b">
            <AccordionHeader as="h3">
              <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
                <span>
                  Can I add headings inside the accordion?
                </span>
                <span class="pl-2">
                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                </span>
              </AccordionTrigger>
            </AccordionHeader>
            <AccordionContent class="accordion-animation-1 overflow-hidden">
              <p class="pb-4">
                Yes, if you wrap the{" "}
                <strong>AccordionHeader</strong> component
                around the trigger, screen readers will
                announce it properly.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem class="border-b">
            <AccordionHeader as="h3">
              <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
                <span>Is it easy to animate?</span>
                <span class="pl-2">
                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                </span>
              </AccordionTrigger>
            </AccordionHeader>
            <AccordionContent class="accordion-animation-1 overflow-hidden">
              <p class="pb-4">
                Yup! You can even use animations or CSS
                transitions using the{" "}
                <strong>animated</strong> prop on the
                accordion root!
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem class="border-b">
            <AccordionHeader as="h3">
              <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
                <span>
                  How about opening multiple items?
                </span>
                <span class="pl-2">
                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                </span>
              </AccordionTrigger>
            </AccordionHeader>
            <AccordionContent class="accordion-animation-1 overflow-hidden">
              <p class="pb-4">
                You can do that by setting the{" "}
                <strong>behavior</strong> prop to "multi" on
                the Accordion
              </p>
            </AccordionContent>
          </AccordionItem>
        </AccordionRoot>
      </div>
    </>
  );
});
```

Here we see that, to give maximum customization to the end user who will use the component, various components have been defined. We see them listed in the initial imports, and together they make up the final result. These components are in fact `AccordionContent`, `AccordionHeader`, `AccordionItem`, `AccordionRoot`, and `AccordionTrigger`.
Tailwind was used to add style to these headless components, but let's analyze them to understand how you can go into such detail to create something complex.

### AccordionRoot

```tsx
import { accordionRootContextId } from './accordion-context-id';
import { type AccordionRootContext } from './accordion-context.type';

export type AccordionRootProps = {
	behavior?: 'single' | 'multi';
	animated?: boolean;
	enhance?: boolean;
	collapsible?: boolean;
	onSelectedIndexChange$?: PropFunction<(index: number) => void>;
	onFocusIndexChange$?: PropFunction<(index: number) => void>;
} & QwikIntrinsicElements['div'];

export const AccordionRoot = component$(
	({
		collapsible = true,
		behavior = 'single',
		animated = false,
		onSelectedIndexChange$,
		onFocusIndexChange$,
		...props
	}: AccordionRootProps) => {
		const rootRef = useSignal<HTMLDivElement | undefined>();
		const rootElement = rootRef.value;
		const currFocusedTriggerIndexSig = useSignal<number>(-1);
		const currSelectedTriggerIndexSig = useSignal<number>(-1);
		const selectedTriggerIdSig = useSignal<string>('');
		const triggerElementsSig = useSignal<HTMLButtonElement[]>([]);

		useTask$(({ track }) => {
			track(() => currSelectedTriggerIndexSig.value);

			if (onSelectedIndexChange$) {
				onSelectedIndexChange$(currSelectedTriggerIndexSig.value);
			}
		});

		useTask$(({ track }) => {
			track(() => currFocusedTriggerIndexSig.value);
			if (onFocusIndexChange$) {
				onFocusIndexChange$(currFocusedTriggerIndexSig.value);
			}
		});

		const updateTriggers$ = $(() => {
			if (!rootElement) {
				return;
			}

			// needs to grab a new array when adding or removing elements dynamically.
			const getLatestTriggers = Array.from(
				rootElement.querySelectorAll('[data-trigger-id]')
			) as HTMLButtonElement[];

			triggerElementsSig.value = getLatestTriggers.filter((element) => {
				if (element.getAttribute('aria-disabled') === 'true') {
					return false;
				}

				return true;
			});
		});

		const focusPreviousTrigger$ = $(() => {
			[...]
		});

		const focusNextTrigger$ = $(() => {
      [...]
		});

		const focusFirstTrigger$ = $(() => {
			[...]
		});

		const focusLastTrigger$ = $(() => {
			[...]
		});

		// takes a role call of its children (reactive b/c it's a signal)
		useVisibleTask$(function reIndexTriggers() {
			updateTriggers$();
		});

		const contextService: AccordionRootContext = {
			updateTriggers$,
			focusFirstTrigger$,
			focusPreviousTrigger$,
			focusNextTrigger$,
			focusLastTrigger$,
			currFocusedTriggerIndexSig,
			currSelectedTriggerIndexSig,
			selectedTriggerIdSig,
			triggerElementsSig,
			collapsible,
			behavior,
			animated,
		};

		useContextProvider(accordionRootContextId, contextService);

		return (
			<div {...props} ref={rootRef}>
				<Slot />
			</div>
		);
	}
);
```

Meanwhile, we can notice that in this long component at the end, we have inserted a `<Slot />` which allows you to render the other components that are enclosed within `<AccordionRoot />`. Furthermore, if we go to the beginning of the file we have different properties that are used to cover different cases and satisfy all end users.

Here are the properties that this component accepts:

-   **behavior**: Determines whether the Accordion will open one or multiple items at a time.
-   **collapsible**: Will allow the accordion to collapse items if set to true.
-   **animated**: Allows the trigger to close using the onAnimationEnd$ and onTransitionEnd$ event handlers.
-   **onSelectedIndexChange$**: An event hook that gets notified whenever the selected index changes.
-   **onFocusIndexChange$**: An event hook that gets notified whenever the focus index changes.

In addition to the methods that will be used to make the component dynamic, there is `useContextProvider(accordionRootContextId, contextService);` which is used to create a context to be used in the other components.

### AccordionItem

```tsx
import { accordionItemContextId } from "./accordion-context-id";
import { type AccordionItemContext } from "./accordion-context.type";

export type AccordionItemProps = {
  defaultValue?: boolean;
} & QwikIntrinsicElements["div"];

export const AccordionItem = component$(
  ({
    defaultValue = false,
    id,
    ...props
  }: AccordionItemProps) => {
    const localId = useId();
    const itemId = id || localId;

    const isTriggerExpandedSig =
      useSignal<boolean>(defaultValue);

    const itemContext: AccordionItemContext = {
      itemId,
      isTriggerExpandedSig,
      defaultValue,
    };

    useContextProvider(accordionItemContextId, itemContext);

    return (
      <div
        id={itemId}
        data-type="item"
        data-item-id={itemId}
        {...props}
      >
        <Slot />
      </div>
    );
  }
);
```

Here are the properties that this component accepts:

-   **id**: Allows the consumer to supply their id attribute for the item and its descendants.
-   **defaultValue**: Determines whether the Accordion Item will open by default.

This component is used to render the rest of the components and therefore is short. Here too, a context `useContextProvider(accordionItemContextId, itemContext);` is created, again to share an internal state with the components that will be inserted in place of the `<Slot />`.

### AccordionHeader

```tsx
import { accordionItemContextId } from "./accordion-context-id";

type HeadingUnion = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

export type AccordionHeaderProps =
  QwikIntrinsicElements[HeadingUnion] & {
    as?: HeadingUnion;
  };

export const AccordionHeader = component$(
  ({ as = "h3", ...props }: AccordionHeaderProps) => {
    const itemContext = useContext(accordionItemContextId);
    const itemId = itemContext.itemId;
    const headerId = `${itemId}-header`;

    const PolymorphicHeading = as;

    return (
      <PolymorphicHeading id={headerId} {...props}>
        <Slot />
      </PolymorphicHeading>
    );
  }
);
```

Here are the properties that this component accepts:

-   **as**: Sets the heading tag of the Accordion Header

Thanks to `QwikIntrinsicAttributes` you can inherit the properties of native HTML elements.

-   **class**: CSS classes you can apply
-   **style**: CSS styles you can apply
-   **disabled**: Disables the element
-   **onClick$**: A custom click handler that executes when the element is clicked.
-   **onKeyDown$**: A custom click handler that executes when the key is pressed down.
-   **onFocus$**: A custom click handler that executes when an element is focused.

Here the `itemContext` is extracted from the `accordionItemContextId` context and the `headerId` to be assigned to the component is used.

### AccordionTrigger

```tsx
import {
  accordionItemContextId,
  accordionRootContextId,
} from "./accordion-context-id";

import { KeyCode } from "../../utils/key-code.type";

const accordionPreventedKeys = [
  KeyCode.Home,
  KeyCode.End,
  KeyCode.PageDown,
  KeyCode.PageUp,
  KeyCode.ArrowDown,
  KeyCode.ArrowUp,
];

export type AccordionTriggerProps = {
  disabled?: boolean;
} & QwikIntrinsicElements["button"];

export const AccordionTrigger = component$(
  ({ disabled, ...props }: AccordionTriggerProps) => {
    const contextService = useContext(
      accordionRootContextId
    );
    const itemContext = useContext(accordionItemContextId);

Qwik UI

Masterclasses

Tutorials

Fullstack React with TypeScript