### Start Playground

Source: https://github.com/kobaltedev/kobalte/blob/main/CONTRIBUTING.md

Starts the local development server for the Kobalte playground.

```bash
pnpm dev:core
```

--------------------------------

### Basic Context Menu Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/context-menu.mdx

Demonstrates the basic structure and usage of the Context Menu component. Includes standard items, disabled items, submenus, checkboxes, radio groups, and custom styling via CSS classes. Ensure 'some-icon-library' is installed for icons.

```tsx
import { ContextMenu } from "@kobalte/core/context-menu";
import { createSignal } from "solid-js";
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "some-icon-library";
import "./style.css";

function App() {
  const [showGitLog, setShowGitLog] = createSignal(true);
  const [showHistory, setShowHistory] = createSignal(false);
  const [branch, setBranch] = createSignal("main");

  return (
    <ContextMenu>
      <ContextMenu.Trigger class="context-menu__trigger">
        Right click here.
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Content class="context-menu__content">
          <ContextMenu.Item class="context-menu__item">
            Commit <div class="context-menu__item-right-slot">⌘+K</div>
          </ContextMenu.Item>
          <ContextMenu.Item class="context-menu__item">
            Push <div class="context-menu__item-right-slot">⇧+⌘+K</div>
          </ContextMenu.Item>
          <ContextMenu.Item class="context-menu__item" disabled>
            Update Project <div class="context-menu__item-right-slot">⌘+T</div>
          </ContextMenu.Item>
          <ContextMenu.Sub overlap gutter={4} shift={-8}>
            <ContextMenu.SubTrigger class="context-menu__sub-trigger">
              GitHub
              <div class="context-menu__item-right-slot">
                <ChevronRightIcon width={20} height={20} />
              </div>
            </ContextMenu.SubTrigger>
            <ContextMenu.Portal>
              <ContextMenu.SubContent class="context-menu__sub-content">
                <ContextMenu.Item class="context-menu__item">
                  Create Pull Request…
                </ContextMenu.Item>
                <ContextMenu.Item class="context-menu__item">
                  View Pull Requests
                </ContextMenu.Item>
                <ContextMenu.Item class="context-menu__item">
                  Sync Fork
                </ContextMenu.Item>
                <ContextMenu.Separator class="context-menu__separator" />
                <ContextMenu.Item class="context-menu__item">
                  Open on GitHub
                </ContextMenu.Item>
              </ContextMenu.SubContent>
            </ContextMenu.Portal>
          </ContextMenu.Sub>

          <ContextMenu.Separator class="context-menu__separator" />

          <ContextMenu.CheckboxItem
            class="context-menu__checkbox-item"
            checked={showGitLog()}
            onChange={setShowGitLog}
          >
            <ContextMenu.ItemIndicator class="context-menu__item-indicator">
              <CheckIcon />
            </ContextMenu.ItemIndicator>
            Show Git Log
          </ContextMenu.CheckboxItem>
          <ContextMenu.CheckboxItem
            class="context-menu__checkbox-item"
            checked={showHistory()}
            onChange={setShowHistory}
          >
            <ContextMenu.ItemIndicator class="context-menu__item-indicator">
              <CheckIcon />
            </ContextMenu.ItemIndicator>
            Show History
          </ContextMenu.CheckboxItem>

          <ContextMenu.Separator class="context-menu__separator" />

          <ContextMenu.Group>
            <ContextMenu.GroupLabel class="context-menu__group-label">
              Branches
            </ContextMenu.GroupLabel>
            <ContextMenu.RadioGroup value={branch()} onChange={setBranch}>
              <ContextMenu.RadioItem class="context-menu__radio-item" value="main">
                <ContextMenu.ItemIndicator class="context-menu__item-indicator">
                  <DotFilledIcon />
                </ContextMenu.ItemIndicator>
                main
              </ContextMenu.RadioItem>
              <ContextMenu.RadioItem class="context-menu__radio-item" value="develop">
                <ContextMenu.ItemIndicator class="context-menu__item-indicator">
                  <DotFilledIcon />
                </ContextMenu.ItemIndicator>
                develop
              </ContextMenu.RadioItem>
            </ContextMenu.RadioGroup>
          </ContextMenu.Group>
        </ContextMenu.Content>
      </ContextMenu.Portal>
    </ContextMenu>
  );
}

```

--------------------------------

### Install @kobalte/utils

Source: https://github.com/kobaltedev/kobalte/blob/main/packages/utils/README.md

Install the @kobalte/utils package using npm, yarn, or pnpm.

```bash
npm install @kobalte/utils
# or
yarn add @kobalte/utils
# or
pnpm add @kobalte/utils
```

--------------------------------

### Start Documentation Server

Source: https://github.com/kobaltedev/kobalte/blob/main/CONTRIBUTING.md

Starts the local development server for the Kobalte documentation.

```bash
pnpm dev:docs
```

--------------------------------

### Basic Combobox Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/combobox.mdx

Demonstrates a basic Combobox with a list of fruits. It includes input for searching and displays a checkmark for selected items. Ensure you have an icon library like 'some-icon-library' installed for the icons to render.

```tsx
import { Combobox } from "@kobalte/core/combobox";
import { CaretSortIcon, CheckIcon } from "some-icon-library";
import { createSignal } from "solid-js";
import "./style.css";

const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];

function App() {
  return (
    <Combobox
      options={ALL_OPTIONS}
      placeholder="Search a fruit…"
      itemComponent={props => (
        <Combobox.Item item={props.item} class="combobox__item">
          <Combobox.ItemLabel>{props.item.rawValue}</Combobox.ItemLabel>
          <Combobox.ItemIndicator class="combobox__item-indicator">
            <CheckIcon />
          </Combobox.ItemIndicator>
        </Combobox.Item>
      )} >
      <Combobox.Control class="combobox__control" aria-label="Fruit">
        <Combobox.Input class="combobox__input" />
        <Combobox.Trigger class="combobox__trigger">
          <Combobox.Icon class="combobox__icon">
            <CaretSortIcon />
          </Combobox.Icon>
        </Combobox.Trigger>
      </Combobox.Control>
      <Combobox.Portal>
        <Combobox.Content class="combobox__content">
          <Combobox.Listbox class="combobox__listbox" />
        </Combobox.Content>
      </Combobox.Portal>
    </Combobox>
  );
}

```

```css
.combobox__control {
  display: inline-flex;
  justify-content: space-between;
  width: 200px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  outline: none;
  background-color: white;
  border: 1px solid hsl(240 6% 90%);
  color: hsl(240 4% 16%);
  transition: border-color 250ms, color 250ms;
}

.combobox__control[data-invalid] {
  border-color: hsl(0 72% 51%);
  color: hsl(0 72% 51%);
}

.combobox__control_multi {
  width: 100%;
  min-width: 200px;
  max-width: 300px;
}

.combobox__input {
  appearance: none;
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  padding-left: 16px;
  font-size: 16px;
  background: transparent;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  outline: none;
}

.combobox__input::placeholder {
  color: hsl(240 4% 46%);
}

.combobox__trigger {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  outline: none;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 0 10px;
  background-color: hsl(240 5% 96%);
  border-left: 1px solid hsl(240 6% 90%);
  color: hsl(240 4% 16%);
  font-size: 16px;
  line-height: 0;
  transition: 250ms background-color;
}

.combobox__icon {
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
}

.combobox__description {
  margin-top: 8px;
  color: hsl(240 5% 26%);
  font-size: 12px;
  user-select: none;
}

.combobox__error-message {
  margin-top: 8px;
  color: hsl(0 72% 51%);
  font-size: 12px;
  user-select: none;
}

.combobox__content {
  background-color: white;
  border-radius: 6px;
  border: 1px solid hsl(240 6% 90%);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transform-origin: var(--kb-combobox-content-transform-origin);
  animation: contentHide 250ms ease-in forwards;
}

.combobox__content[data-expanded] {
  animation: contentShow 250ms ease-out;
}

.combobox__listbox {
  overflow-y: auto;
  max-height: 360px;
  padding: 8px;
}

.combobox__listbox:focus {
  outline: none;
}

.combobox__item {
  font-size: 16px;
  line-height: 1;
  color: hsl(240 4% 16%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 8px;
  position: relative;
  user-select: none;
  outline: none;
}

.combobox__item[data-disabled] {
  color: hsl(240 5% 65%);
  opacity: 0.5;
  pointer-events: none;
}

.combobox__item[data-highlighted] {
  outline: none;
  background-color: hsl(200 98% 39%);
  color: white;
}

.combobox__section {
  padding: 8px 0 0 8px;
  font-size: 14px;
  line-height: 32px;
  color: hsl(240 4% 46%);
}

.combobox__item-indicator {
  height: 20px;
}

```

--------------------------------

### Basic Menubar Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/menubar.mdx

Demonstrates the basic structure of a Menubar with nested submenus, checkboxes, and radio groups. Ensure you have an icon library like 'some-icon-library' installed for icons like CheckIcon, ChevronRightIcon, and DotFilledIcon. The CSS classes like 'menubar__root', 'menubar__item', etc., are used for styling and should be defined in './style.css'.

```tsx
import { Menubar } from "@kobalte/core/menubar";
import { createSignal } from "solid-js";
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "some-icon-library";
import "./style.css";

function App() {
  const [showGitLog, setShowGitLog] = createSignal(true);
  const [showHistory, setShowHistory] = createSignal(false);
  const [branch, setBranch] = createSignal("main");

  return (
      <Menubar class="menubar__root">
        <Menubar.Menu>
          <Menubar.Trigger class="menubar__trigger">
            Git
          </Menubar.Trigger>
          <Menubar.Portal>
            <Menubar.Content class="menubar__content">
              <Menubar.Item class="menubar__item">
                Commit <div class="menubar__item-right-slot">⌘+K</div>
              </Menubar.Item>
              <Menubar.Item class="menubar__item">
                Push <div class="menubar__item-right-slot">⇧+⌘+K</div>
              </Menubar.Item>
              <Menubar.Item class="menubar__item" disabled>
                Update Project <div class="menubar__item-right-slot">⌘+T</div>
              </Menubar.Item>
              <Menubar.Sub overlap gutter={4} shift={-8}>
                <Menubar.SubTrigger class="menubar__sub-trigger">
                  GitHub
                  <div class="menubar__item-right-slot">
                    <ChevronRightIcon width={20} height={20} />
                  </div>
                </Menubar.SubTrigger>
                <Menubar.Portal>
                  <Menubar.SubContent class="menubar__sub-content">
                    <Menubar.Item class="menubar__item">
                      Create Pull Request…
                    </Menubar.Item>
                    <Menubar.Item class="menubar__item">
                      View Pull Requests
                    </Menubar.Item>
                    <Menubar.Item class="menubar__item">Sync Fork</Menubar.Item>
                    <Menubar.Separator class="menubar__separator" />
                    <Menubar.Item class="menubar__item">
                      Open on GitHub
                    </Menubar.Item>
                  </Menubar.SubContent>
                </Menubar.Portal>
              </Menubar.Sub>

              <Menubar.Separator class="menubar__separator" />

              <Menubar.CheckboxItem
              class="menubar__checkbox-item"
              checked={showGitLog()}
              onChange={setShowGitLog}
              >
              <Menubar.ItemIndicator class="menubar__item-indicator">
                <CheckIcon />
              </Menubar.ItemIndicator>
              Show Git Log
            </Menubar.CheckboxItem>
            <Menubar.CheckboxItem
            class="menubar__checkbox-item"
            checked={showHistory()}
            onChange={setShowHistory}
            >
            <Menubar.ItemIndicator class="menubar__item-indicator">
              <CheckIcon />
            </Menubar.ItemIndicator>
            Show History
          </Menubar.CheckboxItem>

          <Menubar.Separator class="menubar__separator" />

          <Menubar.Group>
            <Menubar.GroupLabel class="menubar__group-label">
              Branches
            </Menubar.GroupLabel>
            <Menubar.RadioGroup value={branch()} onChange={setBranch}>
              <Menubar.RadioItem class="menubar__radio-item" value="main">
                <Menubar.ItemIndicator class="menubar__item-indicator">
                  <DotFilledIcon />
                </Menubar.ItemIndicator>
                main
              </Menubar.RadioItem>
              <Menubar.RadioItem class="menubar__radio-item" value="develop">
                <Menubar.ItemIndicator class="menubar__item-indicator">
                  <DotFilledIcon />
                </Menubar.ItemIndicator>
                develop
              </Menubar.RadioItem>
            </Menubar.RadioGroup>
          </Menubar.Group>
        </Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>

    <Menubar.Menu>
      <Menubar.Trigger class="menubar__trigger">
        File
      </Menubar.Trigger>
      <Menubar.Portal>
        <Menubar.Content class="menubar__content">
          <Menubar.Item class="menubar__item">

```

--------------------------------

### Install @kobalte/tailwindcss

Source: https://github.com/kobaltedev/kobalte/blob/main/packages/tailwindcss/README.md

Install the plugin using npm, yarn, or pnpm.

```bash
npm install -D @kobalte/tailwindcss
# or
yarn add -D @kobalte/tailwindcss
# or
pnpm add -D @kobalte/tailwindcss
```

--------------------------------

### Install Kobalte with pnpm

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/overview/getting-started.mdx

Install the Kobalte core package using pnpm.

```bash
pnpm add @kobalte/core
```

--------------------------------

### Install Kobalte with npm

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/overview/getting-started.mdx

Install the Kobalte core package using npm.

```bash
npm install @kobalte/core
```

--------------------------------

### Install Kobalte Core

Source: https://github.com/kobaltedev/kobalte/blob/main/packages/core/README.md

Install the @kobalte/core package using npm, yarn, or pnpm.

```bash
npm install @kobalte/core
# or
yarn add @kobalte/core
# or
pnpm add @kobalte/core
```

--------------------------------

### Install Kobalte with yarn

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/overview/getting-started.mdx

Install the Kobalte core package using yarn.

```bash
yarn add @kobalte/core
```

--------------------------------

### Install Kobalte Vanilla Extract

Source: https://github.com/kobaltedev/kobalte/blob/main/packages/vanilla-extract/README.md

Install the @kobalte/vanilla-extract package as a development dependency.

```bash
npm install -D @kobalte/vanilla-extract
# or
yarn add -D @kobalte/vanilla-extract
# or
pnpm add -D @kobalte/vanilla-extract
```

--------------------------------

### Build All Packages and Docs

Source: https://github.com/kobaltedev/kobalte/blob/main/CONTRIBUTING.md

Builds all packages and documentation locally. Run this after installing dependencies.

```bash
pnpm build
```

--------------------------------

### Basic Link Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/link.mdx

A simple example of how to use the Link component to navigate to a URL. Includes basic styling.

```tsx
import { Link } from "@kobalte/core/link";
import "./style.css";

function App() {
  return (
    <Link class="link" href="https://kobalte.dev">
      Kobalte
    </Link>
  );
}
```

```css
.link {
  font-weight: 600;
  color: hsl(201 96% 32%);
}

.link:hover {
  text-decoration: underline;
}

.link[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.link[data-disabled]:hover {
  text-decoration: none;
}
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/kobaltedev/kobalte/blob/main/CONTRIBUTING.md

Install project dependencies using pnpm. This is a required step after cloning the repository.

```bash
pnpm
```

--------------------------------

### Basic Toast Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/toast.mdx

A simple example of how to render a basic toast notification. Ensure the Toast component is imported and available in your scope.

```tsx
import {
  Toast,
  ToastAction,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@kobalte/core/toast";
import { Show } from "solid-js";
import {
  createToast,
  ToastOptions,
  ToastState,
} from "@kobalte/core/toast";

const [toastState, { show, hide, dismiss }]: ToastState = createToast();

function App() {
  const handleAction = () => {
    console.log("Action clicked");
    dismiss();
  };

  const handleClose = () => {
    console.log("Toast closed");
  };

  return (
    <>
      <button onClick={() => show({ title: "Hello", description: "This is a toast!" })}>Show Toast</button>
      <ToastProvider>
        <ToastViewport />
        <Show when={toastState()?.isOpen()}>
          <Toast>
            <ToastTitle>{toastState()?.title}</ToastTitle>
            <ToastDescription>{toastState()?.description}</ToastDescription>
            <ToastAction altText="Perform an action" onClick={handleAction}>
              Action
            </ToastAction>
            <ToastClose onClick={handleClose} />
          </Toast>
        </Show>
      </ToastProvider>
    </>
  );
}

export default App;
```

--------------------------------

### Multiple Skeletons Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/skeleton.mdx

Demonstrates how to use multiple Skeleton components to create a loading state for a profile card and associated text. This example requires associated CSS for styling.

```tsx
import { Skeleton } from "@kobalte/core/skeleton";
import { Image } from "@kobalte/core/image";
import "./style.css";

function App() {
  return (
    <div class="multiple-root">
      <div class="multiple-profile">
        <Skeleton class="skeleton" height={50} circle>
          <Image class="multiple-avatar">
            <Image.Img
              class="image__img"
              src="https://pbs.twimg.com/profile_images/1509139491671445507/pzWYjlYN_400x400.jpg"
              alt="Nicole Steeves"
            />
          </Image>
        </Skeleton>
        <Skeleton class="skeleton" height={20} radius={10}>
          Kobalte
        </Skeleton>
      </div>
      <Skeleton class="skeleton" radius={10}>
        <p>
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </p>
      </Skeleton>
    </div>
  );
}
```

```css
@keyframes skeleton-fade {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.skeleton {
  height: auto;
  width: 100%;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.skeleton[data-animate="true"]::after {
  animation: skeleton-fade 1500ms linear infinite;
}

.skeleton[data-visible="true"] {
  overflow: hidden;
}
.skeleton[data-visible="true"]::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 10;
  background-color: white;
}

.skeleton[data-visible="true"]::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 11;
  background-color: gray;
}

.multiple-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multiple-profile {
  display: flex;
  gap: 10px;
  align-items: center;
}
```

--------------------------------

### Basic Dialog Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/dialog.mdx

Demonstrates the basic structure of a Dialog component, including trigger, overlay, content, title, description, and close button. This example requires associated CSS for proper display and animation.

```tsx
import { Dialog } from "@kobalte/core/dialog";
import { CrossIcon } from "some-icon-library";
import "./style.css";

function App() {
  return (
    <Dialog>
      <Dialog.Trigger class="dialog__trigger">Open</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay class="dialog__overlay" />
        <div class="dialog__positioner">
          <Dialog.Content class="dialog__content">
            <div class="dialog__header">
              <Dialog.Title class="dialog__title">About Kobalte</Dialog.Title>
              <Dialog.CloseButton class="dialog__close-button">
                <CrossIcon />
              </Dialog.CloseButton>
            </div>
            <Dialog.Description class="dialog__description">
              Kobalte is a UI toolkit for building accessible web apps and design systems with
              SolidJS. It provides a set of low-level UI components and primitives which can be the
              foundation for your design system implementation.
            </Dialog.Description>
          </Dialog.Content>
        </div>
      </Dialog.Portal>
    </Dialog>
  );
}
```

```css
.dialog__trigger {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: auto;
  outline: none;
  border-radius: 6px;
  padding: 0 16px;
  background-color: hsl(200 98% 39%);
  color: white;
  font-size: 16px;
  line-height: 0;
  transition: 250ms background-color;
}

.dialog__trigger:hover {
  background-color: hsl(201 96% 32%);
}

.dialog__trigger:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}

.dialog__trigger:active {
  background-color: hsl(201 90% 27%);
}

.dialog__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgb(0 0 0 / 0.2);
  animation: overlayHide 250ms ease 100ms forwards;
}

.dialog__overlay[data-expanded] {
  animation: overlayShow 250ms ease;
}

.dialog__positioner {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog__content {
  z-index: 50;
  max-width: min(calc(100vw - 16px), 500px);
  border: 1px solid hsl(240 5% 84%);
  border-radius: 6px;
  padding: 16px;
  background-color: white;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  animation: contentHide 300ms ease-in forwards;
}

.dialog__content[data-expanded] {
  animation: contentShow 300ms ease-out;
}

.dialog__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dialog__close-button {
  height: 16px;
  width: 16px;
  color: hsl(240 5% 34%);
}

.dialog__title {
  font-size: 20px;
  font-weight: 500;
  color: hsl(240 6% 10%);
}

.dialog__description {
  font-size: 16px;
  color: hsl(240 5% 26%);
}

@keyframes overlayShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes overlayHide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes contentHide {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}
```

--------------------------------

### Basic ColorSwatch Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/color-swatch.mdx

A basic example of the ColorSwatch component. Ensure you have the necessary CSS imported for styling.

```tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} />
  );
}
```

```css
.ColorSwatchRoot {
  height: 56px;
  width: 56px;
  border-radius: 6px;
}
```

--------------------------------

### Install @kobalte/vanilla-extract

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/overview/styling.mdx

Install the Vanilla Extract plugin for Kobalte using npm, yarn, or pnpm. This plugin helps in targeting Kobalte's data attributes for styling.

```bash
npm install @kobalte/vanilla-extract
```

```bash
yarn add @kobalte/vanilla-extract
```

```bash
pnpm add @kobalte/vanilla-extract
```

--------------------------------

### Skeleton Toggle Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/skeleton.mdx

Demonstrates how to use the Skeleton component with a ToggleButton to control its visibility. Includes both the TypeScript and CSS for the example.

```tsx
import { Skeleton } from "@kobalte/core/skeleton";
import { ToggleButton } from "@kobalte/core/toggle-button";
import "./style.css";

function App() {
  const [visible, setVisible] = createSignal(true);
  return (
    <div class="toggle-root">
      <ToggleButton class="toggle-button" pressed={visible()} onChange={setVisible}>
        Skeleton {visible() ? "Visible" : "Not Visible"}
      </ToggleButton>
      <Skeleton class="skeleton" visible={visible()}>
        <p>
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </p>
      </Skeleton>
    </div>
  );
}

```

```css
@keyframes skeleton-fade {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.skeleton {
  height: auto;
  width: 100%;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.skeleton[data-animate="true"]::after {
  animation: skeleton-fade 1500ms linear infinite;
}

.skeleton[data-visible="true"] {
  overflow: hidden;
}
.skeleton[data-visible="true"]::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 10;
  background-color: white;
}

.skeleton[data-visible="true"]::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 11;
  background-color: gray;
}

.toggle-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.toggle-button {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 50%;
  outline: none;
  border-radius: 6px;
  background-color: hsl(200 98% 39%);
  color: white;
  font-size: 16px;
  line-height: 0;
}

.toggle-button:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}

.toggle-button[data-pressed] {
  background-color: hsl(0 72% 51%);
}

```

--------------------------------

### Basic Progress Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/progress.mdx

A simple implementation of the Progress component showing a determinate progress bar.

```tsx
import { Progress } from "@kobalte/core/progress";
import "./style.css";

function App() {
  return (
    <Progress value={80} class="progress">
      <div class="progress__label-container">
        <Progress.Label class="progress__label">Loading...</Progress.Label>
        <Progress.ValueLabel class="progress__value-label" />
      </div>
      <Progress.Track class="progress__track">
        <Progress.Fill class="progress__fill" />
      </Progress.Track>
    </Progress>
  );
}
```

--------------------------------

### Basic TextField Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/text-field.mdx

A simple example of a TextField component with a label and an input field. This demonstrates the basic usage and integration within an application.

```tsx
import { TextField } from "@kobalte/core/text-field";
import "./style.css";

function App() {
  return (
    <TextField class="text-field">
      <TextField.Label class="text-field__label">Favorite fruit</TextField.Label>
      <TextField.Input class="text-field__input" />
    </TextField>
  );
}
```

--------------------------------

### Customizable Pagination with Styling

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/pagination.mdx

Provides a complete example of a customizable Pagination component with custom item and ellipsis components, along with CSS for styling. This example shows how to integrate custom styles for different parts of the pagination.

```tsx
import { Pagination } from "@kobalte/core/pagination";
import "./style.css";

function App() {
  return (
  <Pagination
    class="pagination__root"
    count={10}
    itemComponent={props => (
      <Pagination.Item class="pagination__item" page={props.page}>{props.page}</Pagination.Item>
      )}
    ellipsisComponent={() => (
      <Pagination.Ellipsis class="pagination__ellipsis">...</Pagination.Ellipsis>
      )>
      <Pagination.Previous class="pagination__item">Previous</Pagination.Previous>
      <Pagination.Items/>
      <Pagination.Next class="pagination__item">Next</Pagination.Next>
    </Pagination>
  );
}
```

```css
.pagination__root > ul {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.pagination__item {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: auto;
  outline: none;
  border-radius: 6px;
  padding: 0 16px;
  background-color: white;
  color: hsl(240 4% 16%);
  font-size: 16px;
  line-height: 0;
  transition: 250ms background-color, 250ms color, 250ms border-color;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border: 1px solid hsl(240 6% 90%);
}

.pagination__ellipsis {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: auto;
  outline: none;
  border-radius: 6px;
  padding: 0 16px;
  background-color: white;
  color: hsl(240 4% 16%);
  font-size: 16px;
  line-height: 0;
  cursor: default;
  border: 1px solid hsl(240 6% 90%);
}

.pagination__item[aria-current="page"] {
  background-color: hsl(200 98% 39%);
}

.pagination__item:hover {
  background-color: hsl(200 98% 39%);
}

.pagination__item:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}

.pagination__item:active {
  background-color: hsl(201 90% 27%);
}
```

--------------------------------

### Basic Button Usage

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/button.mdx

A simple example of how to render a Button component with custom text and styling.

```tsx
import { Button } from "@kobalte/core/button";
import "./style.css";

function App() {
  return <Button class="button">Click me</Button>;
}
```

--------------------------------

### Basic Switch Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/switch.mdx

A simple implementation of the Switch component.

```tsx
import { Switch } from "@kobalte/core/switch";
import "./style.css";

function App() {
  return (
    <Switch class="switch">
      <Switch.Label class="switch__label">Airplane mode</Switch.Label>
      <Switch.Input class="switch__input" />
      <Switch.Control class="switch__control">
        <Switch.Thumb class="switch__thumb" />
      </Switch.Control>
    </Switch>
  );
}
```

--------------------------------

### Controlled Tooltip Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/tooltip.mdx

Demonstrates how to control the tooltip's open state using the `open` prop and manage changes with `onOpenChange`.

```tsx
import { createSignal } from "solid-js";

function ControlledExample() {
	const [open, setOpen] = createSignal(false);

	return (
		<>
			<p>Tooltip is {open() ? "showing" : "not showing"}.</p>
			<Tooltip open={open()} onOpenChange={setOpen}>
				<Tooltip.Trigger>Trigger</Tooltip.Trigger>
				<Tooltip.Portal>
					<Tooltip.Content>
						<Tooltip.Arrow />
						<p>Tooltip content</p>
					</Tooltip.Content>
				</Tooltip.Portal>
			</Tooltip>
		</>
	);
}
```

--------------------------------

### Basic Color Channel Field Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/color-channel-field.mdx

Demonstrates a basic setup for a Color Channel Field, specifically for the 'hue' channel. Includes label, input, and increment/decrement triggers. Styles are imported from an external CSS file.

```tsx
import { ColorChannelField } from "@kobalte/core/color-channel-field";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorChannelField class={style["color-channel-field"]} channel="hue">
    <ColorChannelField.Label class={style["color-channel-field__label"]}>
      Hue
    </ColorChannelField.Label>
    <div class={style["color-channel-field__group"]}>
      <ColorChannelField.Input class={style["color-channel-field__input"]} />
      <ColorChannelField.IncrementTrigger
        aria-label="Increment"
        class={style["color-channel-field__increment"]}
      >
        <ArrowIcon />
      </ColorChannelField.IncrementTrigger>
      <ColorChannelField.DecrementTrigger
        aria-label="Decrement"
        class={style["color-channel-field__decrement"]}
      >
        <ArrowIcon style="transform: rotate(180deg);" />
      </ColorChannelField.DecrementTrigger>
    </div>
  </ColorChannelField>
  );
}
```

```css
.color-channel-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

  .color-channel-field__label {
    color: hsl(240 6% 10%);
    font-size: 14px;
    font-weight: 500;
    user-select: none;
  }

  .color-channel-field__input {
    display: inline-flex;
    width: 200px;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 16px;
    outline: none;
    background-color: white;
    border: 1px solid hsl(240 6% 90%);
    color: hsl(240 4% 16%);
    transition:
    border-color 250ms,
    color 250ms;
  }

  .color-channel-field__group {
    position: relative;
    border-radius: 6px;
  }

  .color-channel-field__increment {
    top: .25rem;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .color-channel-field__decrement {
    bottom: .25rem;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
  }

  .color-channel-field__increment, .color-channel-field__decrement {
    right: .25rem;
    position: absolute;
    height: 1rem;
    width: 1rem;
    background: rgba(0,0,0,0.1);
    cursor: default;
  }

  .color-channel-field__increment:hover, .color-channel-field__decrement:hover {
    background: rgba(0,0,0,0.2);
  }

  .color-channel-field__input:hover {
    border-color: hsl(240 5% 65%);
  }

  .color-channel-field__input:focus-visible {
    outline: none;
  }

  .color-channel-field__group:focus-within {
    outline: 2px solid hsl(200 98% 39%);
    outline-offset: 2px;
  }
```

--------------------------------

### Basic Collapsible Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/collapsible.mdx

A functional example of the Collapsible component in use.

```tsx
import { Collapsible } from "@kobalte/core/collapsible";
import { ChevronDownIcon } from "some-icon-library";
import "./style.css";

function App() {
  return (
    <Collapsible class="collapsible">
			<Collapsible.Trigger class="collapsible__trigger">
				<span>What is Kobalte?</span>
				<ChevronDownIcon class="collapsible__trigger-icon" />
			</Collapsible.Trigger>
			<Collapsible.Content class="collapsible__content">
				<p class="collapsible__content-text">
					Kobalte is a UI toolkit for building accessible web apps and design systems with SolidJS.
					It provides a set of low-level UI components and primitives which can be the foundation
					for your design system implementation.
				</p>
			</Collapsible.Content>
		</Collapsible>
  );
}
```

--------------------------------

### Basic Search Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/search.mdx

Demonstrates a basic implementation of the Search component with focus trigger mode, custom option fetching, and item rendering. Includes necessary imports for the component and icons.

```tsx
import { Search } from "@kobalte/core/search";
import { MagnifyingGlassIcon, ReloadIcon } from "some-icon-library";
import { createSignal } from "solid-js";
import "./style.css";

  import { queryEmojiData } from "your-search-function";

  function App() {
    const [options, setOptions] = createSignal([]);
    const [emoji, setEmoji] = createSignal();
    return (
      <>
        <Search
          triggerMode="focus"
          options={options()}
          onInputChange={query => setOptions(queryEmojiData(query))}
          onChange={result => setEmoji(result)}
          optionValue="name"
          optionLabel="name"
          placeholder="Search an emoji…"
          itemComponent={props => (
            <Search.Item item={props.item} class="search__item">
              <Search.ItemLabel>{props.item.rawValue.emoji}</Search.ItemLabel>
            </Search.Item>
          )}>
          <Search.Control class="search__control" aria-label="Emoji">
            <Search.Indicator
              class="search__indicator"
              loadingComponent={
                <Search.Icon class="load__icon">
                  <ReloadIcon class="spin__icon" />
                </Search.Icon>
              }
            >
              <Search.Icon class="search__icon">
                <MagnifyingGlassIcon class="center__icon" />
              </Search.Icon>
            </Search.Indicator>
            <Search.Input class="search__input" />
          </Search.Control>
          <Search.Portal>
            <Search.Content class="search__content" onCloseAutoFocus={(e) => e.preventDefault()}>
              <Search.Listbox class="search__listbox" />
              <Search.NoResult class="search__no_result">
                😬 No emoji found
              </Search.NoResult>
            </Search.Content>
          </Search.Portal>
        </Search>
        <div class="result__content">
          Emoji selected: {emoji()?.emoji} {emoji()?.name}
        </div>
      </>
    )
  }

```

--------------------------------

### Color Wheel Basic Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/color-wheel.mdx

A fundamental example of the Color Wheel component integrated into an application.

```tsx
import { ColorWheel } from "@kobalte/core/color-wheel";
import "./style.css";

function App() {
  return (
    <ColorWheel class="ColorWheelRoot">
        <ColorWheel.Label class="ColorWheelLabel">Label</ColorWheel.Label>
        <ColorWheel.Track class="ColorWheelTrack">
          <ColorWheel.Thumb class="ColorWheelThumb">
            <ColorWheel.Input />
          </ColorWheel.Thumb>
        </ColorWheel.Track>
      </ColorWheel>
  );
}
```

--------------------------------

### Menubar Import Options

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/menubar.mdx

Demonstrates different ways to import the Menubar component from the Kobalte core library.

```typescript
import { Menubar } from "@kobalte/core/menubar";
// or
import { Root, Menu, ... } from "@kobalte/core/menubar";
// or (deprecated)
import { Menubar } from "@kobalte/core";
```

--------------------------------

### Basic Navigation Menu Example

Source: https://github.com/kobaltedev/kobalte/blob/main/apps/docs/src/routes/docs/core/components/navigation-menu.mdx

Demonstrates a basic implementation of the Navigation Menu component with horizontal orientation. It includes multiple menu sections, each with several navigation items.

```tsx
import { NavigationMenu, Orientation } from "@kobalte/core/navigation-menu";
import { RadioGroup } from "@kobalte/core/radio-group";
import { For, createSignal } from "solid-js";

import "./style.css";

export function App() {
  const [orientation, setOrientation] = createSignal<Orientation>("horizontal");

  return (
    <>
      <NavigationMenu class="navigation-menu__root" orientation={orientation()}>
        <NavigationMenu.Menu>
          <NavigationMenu.Trigger class="navigation-menu__trigger">
            Learn <NavigationMenu.Icon class="navigation-menu__trigger-indicator"><ChevronDownIcon /></NavigationMenu.Icon>
          </NavigationMenu.Trigger>
          <NavigationMenu.Portal>
            <NavigationMenu.Content class="navigation-menu__content content-1">
              <NavigationMenu.Item
                class="navigation-menu__item-callout"
                href="https://kobalte.dev"
              >
                <img
                  src="https://kobalte.dev/android-chrome-192x192.png"
                  role="presentation"
                  alt="Kobalte"
                />
                <NavigationMenu.ItemLabel class="navigation-menu__item-label">
                  Kobalte
                </NavigationMenu.ItemLabel>
                <NavigationMenu.ItemDescription class="navigation-menu__item-description">
                  Unstyled, accessible components for SolidJS.
                </NavigationMenu.ItemDescription>
              </NavigationMenu.Item>
              <NavigationMenu.Item
                class="navigation-menu__item"
                href="https://pigment.kobalte.dev"
              >
                <NavigationMenu.ItemLabel class="navigation-menu__item-label">
                  Pigment
                </NavigationMenu.ItemLabel>
                <NavigationMenu.ItemDescription class="navigation-menu__item-description">
                  Ready-to-use components with a consistent look and feel.
                </NavigationMenu.ItemDescription>
              </NavigationMenu.Item>
              <NavigationMenu.Item
                class="navigation-menu__item"
                href="https://www.solidjs.com/"
              >
                <NavigationMenu.ItemLabel class="navigation-menu__item-label">
                  SolidJS
                </NavigationMenu.ItemLabel>
                <NavigationMenu.ItemDescription class="navigation-menu__item-description">
                  Simple and performant reactivity for building user interfaces.
                </NavigationMenu.ItemDescription>
              </NavigationMenu.Item>
              <NavigationMenu.Item
                class="navigation-menu__item"
                href="https://start.solidjs.com/"
              >
                <NavigationMenu.ItemLabel class="navigation-menu__item-label">
                  SolidStart
                </NavigationMenu.ItemLabel>
                <NavigationMenu.ItemDescription class="navigation-menu__item-description">
                  Fine-grained reactivity goes fullstack.
                </NavigationMenu.ItemDescription>
              </NavigationMenu.Item>
            </NavigationMenu.Content>
          </NavigationMenu.Portal>
        </NavigationMenu.Menu>

        <NavigationMenu.Menu>
          <NavigationMenu.Trigger class="navigation-menu__trigger">
            Overview <NavigationMenu.Icon class="navigation-menu__trigger-indicator"><ChevronDownIcon /></NavigationMenu.Icon>
          </NavigationMenu.Trigger>
          <NavigationMenu.Portal>
            <NavigationMenu.Content class="navigation-menu__content content-2">
              <NavigationMenu.Item
                class="navigation-menu__item"
                href="https://kobalte.dev/docs/core/overview/introduction"
              >
                <NavigationMenu.ItemLabel class="navigation-menu__item-label">
                  Introduction
                </NavigationMenu.ItemLabel>
                <NavigationMenu.ItemDescription class="navigation-menu__item-description">
                  Build high-quality, accessible design systems and web apps.
                </NavigationMenu.ItemDescription>

```