diff --git a/apps/website/src/components/showcase/showcase.tsx b/apps/website/src/components/showcase/showcase.tsx
index 7d30e6934..b3943344f 100644
--- a/apps/website/src/components/showcase/showcase.tsx
+++ b/apps/website/src/components/showcase/showcase.tsx
@@ -55,7 +55,7 @@ export const Showcase = component$(({ name, ...props }) => {
return (
diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx
index 5c4852d9a..a5995854f 100644
--- a/apps/website/src/components/status-banner/status-banner.tsx
+++ b/apps/website/src/components/status-banner/status-banner.tsx
@@ -113,7 +113,7 @@ export const StatusBanner = component$((props: StatusBannerProps) => {
class={`${getBackgroundByStatus(
props.status,
)} normal-state shadow-light-medium dark:shadow-dark-medium
- border-qwikui-blue-200 dark:border-qwikui-purple-200 relative rounded-xl border-[1px] px-6 py-4 text-white md:flex-row md:items-center`}
+ border-qwikui-blue-200 dark:border-qwikui-purple-200 relative mx-[-24px] rounded-xl border-[1px] px-8 py-4 text-white md:flex-row md:items-center lg:mx-[-32px]`}
style={{ marginBottom: `${marginBottom}px` }}
>
{getMessageByStatus(props.status)}
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 3b90af01e..74dd86090 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -140,26 +140,19 @@
border: 0.35rem solid transparent;
}
- .code-example-gradient {
- background: linear-gradient(
- to bottom,
- var(--qwikui-slate-900),
- var(--qwikui-slate-800)
- );
- }
- .dark .code-example-gradient {
- background: linear-gradient(
- to bottom,
- var(--qwikui-slate-800),
- var(--qwikui-slate-900)
- );
- }
-
/* no horizontal overflow on code snippets */
.tab-size pre {
white-space: pre-wrap;
background: transparent !important;
}
+
+ .note-link a {
+ border-bottom: 1px solid var(--qwikui-slate-950) !important;
+ }
+
+ .dark .note-link a {
+ border-bottom: 1px solid white !important;
+ }
}
:root {
diff --git a/apps/website/src/routes/docs.css b/apps/website/src/routes/docs.css
index 4b95d7ec9..c4f834298 100644
--- a/apps/website/src/routes/docs.css
+++ b/apps/website/src/routes/docs.css
@@ -8,6 +8,11 @@
this should not affect the styles inside of the tabpanel
A.K.A the components
*/
+
+ table a {
+ @apply border-none;
+ }
+
& > {
p {
@apply mb-6;
@@ -18,7 +23,7 @@
}
h2 {
- @apply mb-8 mt-20 border-b-[1px] border-slate-300 pb-2 text-2xl font-extrabold dark:border-slate-700;
+ @apply mb-8 mt-20 scroll-mt-32 border-b-[1px] border-slate-300 pb-2 text-2xl font-extrabold dark:border-slate-700;
}
h3 {
@@ -47,11 +52,7 @@
}
a {
- @apply border-qwikui-blue-500 dark:border-qwikui-purple-400 ease-step hover:border-qwikui-blue-600 border-b-[1.5px] font-semibold transition-colors duration-300;
- }
-
- code {
- @apply bg-transparent;
+ @apply border-qwikui-blue-600 dark:border-qwikui-purple-400 ease-step hover:border-qwikui-blue-600 border-b-[1.5px] pb-[1.5px] font-semibold transition transition-colors duration-300;
}
p code {
diff --git a/apps/website/src/routes/docs/headless/(getting-started)/contributing/index.mdx b/apps/website/src/routes/docs/headless/(getting-started)/contributing/index.mdx
index caee3de91..15c7877d7 100644
--- a/apps/website/src/routes/docs/headless/(getting-started)/contributing/index.mdx
+++ b/apps/website/src/routes/docs/headless/(getting-started)/contributing/index.mdx
@@ -2,7 +2,7 @@
title: 'Qwik UI - Contributing'
---
-# Contributing to Qwik UI Fluffy
+# Contributing to Qwik UI
We welcome and appreciate contributions from the community!
diff --git a/apps/website/src/routes/docs/headless/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/headless/(getting-started)/install/index.mdx
deleted file mode 100644
index 73633de36..000000000
--- a/apps/website/src/routes/docs/headless/(getting-started)/install/index.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: 'Qwik UI | Headless Kit - Installation'
----
-
-# Installation
-
-To get started with the Headless Kit for Qwik UI, run the following command to install the Headless Kit via npm:
-
-```bash
-npm install -D @qwik-ui/headless
-```
-
-
-
-That's it! The Headless Kit is now installed and ready for use in your Qwik project.
-
-Now you can start building your custom-designed, accessible Qwik web applications using the Qwik UI Headless Kit.
diff --git a/apps/website/src/routes/docs/headless/(getting-started)/introduction/index.mdx b/apps/website/src/routes/docs/headless/(getting-started)/introduction/index.mdx
deleted file mode 100644
index 7bbe55421..000000000
--- a/apps/website/src/routes/docs/headless/(getting-started)/introduction/index.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 'Qwik UI | Headless Kit - Introduction'
----
-
-import ImgQwikUiHeadlessHero from '/public/images/qwik-ui-headless-hero.webp?jsx';
-
-# Headless Kit
-
-## Accessible, Unstyled Qwik UI Components
-
-Welcome to the Headless Kit, a collection of accessible, unstyled components by Qwik UI. The Headless Kit is perfect for developers who want to build their web applications with custom styles while maintaining a strong focus on accessibility.
-
-### Why Choose the Headless Kit?
-
-The Headless Kit allows you to apply your own CSS, making it easy to achieve the look and feel you desire for your Qwik web applications. And you're getting all of the logic and behavior out of the box!
-
-### Accessibility at its Core
-
-Accessibility is at the heart of the Headless Kit. Each component in the library has been meticulously crafted to meet the highest accessibility standards, ensuring that your web applications are inclusive and cater to users of all abilities. By choosing the Headless Kit, you're taking an important step towards creating a more accessible web.
-
-### Seamless Integration with Qwik
-
-The Headless Kit is designed to work hand-in-hand with the Qwik framework. This means that, as a developer, you can enjoy the performance benefits and SEO advantages of Qwik while having complete control over the appearance of your web application. It's the best of both worlds!
-
-
diff --git a/apps/website/src/routes/docs/headless/accordion/index.mdx b/apps/website/src/routes/docs/headless/accordion/index.mdx
index 15c0a0a25..0e1198030 100644
--- a/apps/website/src/routes/docs/headless/accordion/index.mdx
+++ b/apps/website/src/routes/docs/headless/accordion/index.mdx
@@ -3,6 +3,8 @@ title: Qwik UI | Accordion
---
import { statusByComponent } from '~/_state/component-statuses';
+import { FeatureList } from '~/components/feature-list/feature-list';
+import { Note } from '~/components/note/note';
@@ -14,12 +16,14 @@ A stacked set of interactive headings which reveal or hide their associated cont
Qwik UI's Accordion implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
-##### β¨ Features
-
-- Full keyboard navigation
-- Single or Multi Accordion
-- Controlled or uncontrolled
-- Animatable, dynamic, and resumable
+
-> Rather than using the `details` and `summary` tags as disclosure widgets, we use a custom implementation. While these widgets can be used without JavaScript, they come with their own accessibility drawbacks.
+
+**Why not just use the details & summary tags?**
+
+Rather than using the `details` and `summary` tags as disclosure widgets, we use a custom implementation. While these widgets can be used without JavaScript, they come with [their own accessibility drawbacks](https://www.scottohara.me/blog/2022/09/12/details-summary.html).
+
+
## Building blocks
-```tsx
-import { component$ } from '@builder.io/qwik';
-import {
- AccordionRoot,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionContent,
-} from '@qwik-ui/headless';
-
-export default component$(() => {
- return (
-
-
-
- Title
-
- Content
-
-
- );
-});
-```
+
### π¨ Anatomy
@@ -97,7 +84,11 @@ If you're curious about how the accordion is animated, you can use a built-in Qw
The variable calculates the content height behind the scenes, so that you can use this variable in your keyframes. Out of the box, you can use the `accordion-open` and `accordion-close` keyframes in your project. These use an `animation` declaration on the height property.
-> The animation above makes use of the overflow hidden declaration. You can also check out this awesome [Cubic Bezier Tool](https://cubic-bezier.com/) to visualize the animation curve.
+
+ {' '}
+ The animation above makes use of the overflow hidden declaration. You can also check out
+ this awesome [Cubic Bezier Tool](https://cubic-bezier.com/) to visualize the animation curve.
+
## Non-collapsible
@@ -119,7 +110,12 @@ Any disabled elements will be skipped over when using tab or the `Up Arrow` and
You can make the accordion items uncontrolled by adding the **defaultValue** prop on the items. This will open an accordion item without user interaction, and can be used on both type single and multi accordions.
-> Keep in mind: if you're using `behavior="single"` with multiple defaultValue accordion items, the last item will be the one that opens. You may experience flickering behavior as well.
+
+**Don't try to open multiple items with single mode!**
+
+If you're using `behavior="single"` with multiple defaultValue accordion items, the last item will be the one that opens. You may experience flickering behavior as well.
+
+
## Custom Heading Label
@@ -139,7 +135,11 @@ By default, when using the `AccordionHeader` component, it's rendered as an `h3`
`onFocusIndexChange$` will keep track of the current focused index. It can be useful for when you want to programmatically change something based on what the user focuses.
-> When a user clicks a trigger, they are also focusing it, which is worth keeping in mind.
+
+ {' '}
+ When a user clicks a trigger, they are also focusing it, which is worth keeping in mind when
+ using this custom event.
+
## Dynamic
@@ -149,7 +149,10 @@ You can embrace reactivity, using signals, stores, and however else you'd like t
When an Accordion Item is removed, a [Visible Task](https://qwik.builder.io/docs/components/tasks/#usevisibletask) runs that will clean up the DOM node in the browser, ensuring that you stay clear of race condition or memory leak issues.
-> You can add or remove something at any index and the focus order will adhere to the DOM hierarchy!
+
+ {' '}
+ You can add or remove something at any index and the focus order will adhere to the DOM hierarchy!
+
If you'd prefer to add your own id to the Accordion Item with dynamic
diff --git a/apps/website/src/routes/docs/headless/accordion/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/accordion/snippets/building-blocks.tsx
new file mode 100644
index 000000000..6ff4f72e7
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/accordion/snippets/building-blocks.tsx
@@ -0,0 +1,21 @@
+import { component$ } from '@builder.io/qwik';
+import {
+ AccordionRoot,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionContent,
+} from '@qwik-ui/headless';
+
+export default component$(() => {
+ return (
+
+
+
+ Title
+
+ Content
+
+
+ );
+});
diff --git a/apps/website/src/routes/docs/headless/install/confetti-button.tsx b/apps/website/src/routes/docs/headless/install/confetti-button.tsx
new file mode 100644
index 000000000..fe13fabfd
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/install/confetti-button.tsx
@@ -0,0 +1,39 @@
+import { component$, useSignal } from '@builder.io/qwik';
+// @ts-ignore
+import confetti from 'canvas-confetti';
+
+export const ConfettiButton = component$(() => {
+ const buttonRef = useSignal();
+ return (
+
+
+ ## 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:
+
+
+
+ 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:
+
+{' '}
+
+
+
+ {Object.keys(qwikCityPackages).map((key, index) => (
+
+ {key}
+
+ ))}
+
+ {Object.entries(qwikCityPackages).map(([key, value], index) => (
+
+
+ {value}
+
+
+
+ ))}
+
+
+ For a more in-depth installation, or if you'd like to use a different package manager, follow the guide in the [Qwik docs](https://qwik.builder.io/docs/getting-started/#create-an-app-using-the-cli)
+
+ 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`.
+
+
+
+ Now let's copy our accordion code example from the building blocks section:
+
+
+
+
+ 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.
+
+
+
+
+ Here's a Qwik City [project example repository](https://github.com/thejackshelton/qwik-ui-scratch) with the content from above. Feel free to clone it and play with it.
+
+
+ ## Astro
+
+ To set up an Astro application, add the following command in the terminal:
+
+
+
+ {Object.keys(astroPackages).map((key, index) => (
+
+ {key}
+
+ ))}
+
+ {Object.entries(astroPackages).map(([key, value], index) => (
+
+
+ {value}
+
+
+
+ ))}
+
+
+ Add a relative path for your project, and select the `empty` option in the CLI.
+
+
+
+
+
+ Next, let's add the [@qwikdev/astro](https://www.npmjs.com/package/@qwikdev/astro) integration. This integration allows us to leverage resumability and Qwik components inside of Astro.
+
+ Run the following command in the terminal:
+
+
+
+ {Object.keys(qwikAstroCliPackages).map((key, index) => (
+
+ {key}
+
+ ))}
+
+ {Object.entries(qwikAstroCliPackages).map(([key, value], index) => (
+
+
+ {value}
+
+
+
+ ))}
+
+
+
+
+
+
+ Then, let's make sure we use Qwik as our main **jsxImportSource** in `tsconfig.json`. Otherwise, it will not get the proper Qwik types.
+
+ ```json
+ {
+ "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.
+
+
+
+ Once again, let's copy our `building-blocks` example from above.
+
+
+ {/* */}
+
+ And we'll spice it up a bit using some vanilla CSS.
+
+
+
+
+ Here's an Astro [project example repository](https://github.com/thejackshelton/qwik-ui-astro-scratch) with the content from above. Feel free to clone it and play with it.
+
diff --git a/apps/website/src/routes/docs/headless/install/snippets/astro-tsconfig.json b/apps/website/src/routes/docs/headless/install/snippets/astro-tsconfig.json
new file mode 100644
index 000000000..d633eeb9e
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/install/snippets/astro-tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "@builder.io/qwik"
+ }
+}
diff --git a/apps/website/src/routes/docs/headless/install/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/install/snippets/building-blocks.tsx
new file mode 100644
index 000000000..6ff4f72e7
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/install/snippets/building-blocks.tsx
@@ -0,0 +1,21 @@
+import { component$ } from '@builder.io/qwik';
+import {
+ AccordionRoot,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionContent,
+} from '@qwik-ui/headless';
+
+export default component$(() => {
+ return (
+
+
+
+ Title
+
+ Content
+
+
+ );
+});
diff --git a/apps/website/src/routes/docs/headless/introduction/index.mdx b/apps/website/src/routes/docs/headless/introduction/index.mdx
new file mode 100644
index 000000000..7381e0216
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/introduction/index.mdx
@@ -0,0 +1,183 @@
+---
+title: Qwik UI | Introduction
+---
+
+import HeadlessArt from '/public/images/qwik-ui-headless-hero.webp?jsx';
+import { Note } from '~/components/note/note';
+import {
+ AccordionRoot,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionContent,
+} from '@qwik-ui/headless';
+
+import { CollapsibleIcon } from '~/components/icons/CollapsibleIcon.tsx';
+import { AllContributors } from '~/components/all-contributors/all-contributors';
+
+# Introduction
+
+
+ An open source component set optimized to work with Qwik
+
+
+Qwik UI Headless Kit provides a complete set of totally customizable components with built-in structure, behavior, and state. This library serves as a foundation of your design system, providing the missing or non-existent functionality from native solutions.
+
+It gives you, the developer, more time to focus on what matters most, building your awesome app! Apply your favorite styling technology, CSS-in-JS, Tailwind CSS, or whatever floats your boat. Add just a few _ad hoc_ styles or implement a full-on design system, Qwik UI Headless makes it easy.
+
+
+**Woah, why is there a 0 by the version?**
+
+Qwik UI is in its beta phase - it's like a roller coaster, thrilling and full of surprises! **Expect new features and some breaking changes** until we reach version 1.0. So, buckle up and enjoy the ride. ποΈ
+
+
+
+## Vision
+
+In 2024, developers should not have to recreate the same [WAI-Aria Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) from scratch. Building custom components is challenging, and developers shouldn't need to reinvent common UI patterns.
+
+Our aim is to ensure Qwik UI is not just an effective, but also a simple, reliable, and flexible choice for developing applications.
+
+Qwik UI Headless is optimized to squeeze every possible ounce of performance out of Qwik _(Like lemonade from lemons that had a run-in with a steamroller.)_ π₯€
+
+## Why Qwik UI Headless?
+
+### The client and the server
+
+Like Qwik itself, Qwik UI is super performant because it renders everything it can on the server
+
+Unlike many other solutions that focus solely on client-side components, Qwik UI takes advantage of the server, the client, and the concept of resumability.
+
+This means that Qwik UI can operate with any meta-framework that supports Qwik, including the full framework benefits. At the time of writing, that includes [Qwik City](https://qwik.builder.io/docs/qwikcity/) and [Astro](https://astro.build/).
+
+### Embracing native first
+
+Qwik values HTML as the source of truth, and this principle extends to Qwik UI components. We appreciate and adopt the excellent work done by the [Open UI Group](https://open-ui.org/) when appropriate.
+
+
+
+
+
+ {' '}
+
+This approach also encompasses future native APIs. Users of Qwik UI might find themselves using components that can be gradually adopted into the native specification. This implies that, eventually, these custom patterns might not need any JavaScript.
+
+
+ For instance, [Qwik UI's popover
+ component](https://github.com/qwikifiers/qwik-ui/pull/445) uses the native Popover API
+ on supported browsers. The Anchor API is also incrementally adoptable.
+
+
+## Features
+
+### Unstyled
+
+Qwik UI is a headless library, and comes with zero or very minimal styling. This means the design of your components are completely customizable.
+
+
+
+This is in contrast to styled libraries such as Bootstrap or Material UI, where [styles often need to be stripped](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/) in order to be custom.
+
+
+
+### Accessible at its core
+
+Everyone should have equal access to information and functionality on the web. Every Qwik UI component is designed to follow the [WCAG Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/).
+
+However, it's a common misconception that meeting WCAG success criteria guarantees full accessibility of your components. Unfortunately, this is not the case.
+
+The ultimate measure of your components' accessibility is user testing. This aspect, often overlooked in other projects, is a high priority for us.
+
+### Developer Experience that matches UX
+
+Many libraries tout their excellent Developer Experience (DX), but this doesn't necessarily translate into a superior User Experience (UX).
+
+Conversely, some packages offer great UX, but fall short when it comes to DX.
+
+One of the benefits of Qwik is its ability to create performant applications without compromising on DX. Our goal is to extend this same balance of performance and ease-of-use to those utilizing Qwik UI components.
+
+Some examples being:
+
+- TypeScript support
+- Custom Signal Binds
+- Automatic entry and exit animations
+- SSR & SSG, SPA, and hybrid support
+- Fine-grained lazy loading
+
+## Community Driven
+
+Qwik UI is for the community, by the community. An open source project that would not be where it is without the awesome work of its contributors.
+
+
+
+## FAQ
+
+
+
+
+
+ **What kind of support or resources are available if I encounter issues with Qwik UI?**
+
+
+
+
+
+
+ If you stumble into any problems, [create an issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository.
+
+
+ We also have a [discord community](https://discord.gg/PVWUUejrez) with a Qwik UI channel where you can raise any concerns, propose ideas, or chat all things Qwik UI π
+
+
+
+
+
+
+ **How can I contribute to the project?**
+
+
+
+
+
+ We provide a [contributing](/docs/headless/contributing) guide to help get familiar with the repository.
+
+
+ Additionally, we offer a quick start [setup guide](https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md) and a section dedicated to advanced resources below the Components navigation.
+
+
+
+
+
+
+
+ **How can I migrate my existing application to use Qwik UI?**
+
+
+
+
+
+ If you're using `Qwik-React`, `Qwik-Angular`, `@qwikdev/astro`, we suggest incrementally adding Qwik UI components to your application.
+
+
+ Qwik, built as a microfrontend, allows you to incrementally integrate Qwik UI components into your existing application. This approach reduces migration risk and complexity, letting you leverage Qwik UI's benefits at your own pace.
+
+
+
+
+
+
+
+## Credits
+
+We strongly believe in having a [learner's mindset](https://www.jakeyou.com/blog/learners-mindset-how-to-be-a-learner), and as such, we've drawn inspiration from a multitude of projects, learning from their successes and challenges.
+
+Qwik UI's development has been shaped by the following remarkable projects:
+
+- [Radix UI](https://www.radix-ui.com/)
+- [Kobalte](https://kobalte.dev/docs/core/overview/introduction)
+- [Melt UI](https://www.melt-ui.com/docs/introduction)
+- [React Aria](https://react-spectrum.adobe.com/react-aria/)
+- [Reach UI](https://reach.tech/)
diff --git a/apps/website/src/routes/docs/headless/introduction/snippets/headless-css.css b/apps/website/src/routes/docs/headless/introduction/snippets/headless-css.css
new file mode 100644
index 000000000..4a5db953f
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/introduction/snippets/headless-css.css
@@ -0,0 +1,19 @@
+.modal {
+ min-width: 50rem;
+ min-height: 50rem;
+ border-radius: 5px;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+ padding: 1rem;
+}
+
+.modal-header {
+ margin-bottom: 1rem;
+}
+
+.modal-body {
+ margin-bottom: 1rem;
+}
+
+.modal-footer {
+ text-align: right;
+}
diff --git a/apps/website/src/routes/docs/headless/introduction/snippets/headless-jsx.tsx b/apps/website/src/routes/docs/headless/introduction/snippets/headless-jsx.tsx
new file mode 100644
index 000000000..45632c468
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/introduction/snippets/headless-jsx.tsx
@@ -0,0 +1,16 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+import styles from './headless-css.css?inline';
+
+export default component$(() => {
+ const showSig = useSignal(false);
+ useStyles$(styles);
+
+ return (
+
+
+
+
+
+ );
+});
diff --git a/apps/website/src/routes/docs/headless/select/examples/fruits.tsx b/apps/website/src/routes/docs/headless/select/examples/fruits.tsx
index eed196e11..f9aa92c4b 100644
--- a/apps/website/src/routes/docs/headless/select/examples/fruits.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/fruits.tsx
@@ -13,61 +13,61 @@ export default component$(() => {
<>
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+