uikit

Full documentation content.

<page path="/getting-started/introduction" title="Introduction"><![CDATA[URL: https://pmndrs.github.io/uikit/getting-started/introduction
Description: Build performant 3D user interfaces for threejs using R3F and yoga.


> Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.

```bash
npm install three @react-three/fiber @react-three/uikit
```

### What does it look like?

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen, Container } from "@react-three/uikit";

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <Fullscreen flexDirection="row" padding={10} gap={10}>
        <Container flexGrow={1} opacity={0.5} hover={{ opacity: 1 }} backgroundColor="red" />
        <Container flexGrow={1} opacity={0.5} hover={{ opacity: 1 }} backgroundColor="blue" />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

## How to get started

If you are using `@react-three/fiber`, get started with **[building your first layout](./first-layout.mdx)**, take a look at our **[examples](./examples.md)** to see uikit in action. If you want to use vanilla three.js, visit [this tutorial](./vanilla.md). Alternatively, learn more about:

- [All components and their properties](./components-and-properties.md)
- [Globals (defaults, classes, color scheme)](./globals.mdx)
- [Interactivity](../tutorials/interactivity.mdx)
- [Custom materials](../tutorials/custom-materials.md)
- [Custom fonts](../tutorials/custom-fonts.md)
- [Responsive user interfaces](../tutorials/responsive.md)
- [Scrolling](../tutorials/scroll.md)
- [Sizing](../tutorials/sizing.md)
- [Common pitfalls](../advanced/pitfalls.md)
- [Optimize performance](../advanced/performance.md)
- [Theming components](../advanced/theming.mdx)

## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**.

| <h3>default-kit</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>horizon-kit</h3> _based on [RLDS](https://www.figma.com/de-de/community/file/1509641173090552632/meta-horizon-os-ui-set)_ |
| ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| ![Overview over all default components](./default-overview.jpg)           | ![Overview over all horizon components](./horizon-overview.png)                                                               |
| [View All Components](../default-kit/accordion.mdx)                       | [View All Components](../horizon-kit/avatar.mdx)                                                                              |
| install via `@react-three/uikit-default` or `@pmndrs/uikit-default`       | install via `@react-three/uikit-horizon` or `@pmndrs/uikit-horizon`                                                           |

## Migration guides

- from [Uikit 0.\*](../migration/from-version-0.md)

## Sponsors

This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!

![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)
]]></page>
<page path="/getting-started/first-layout" title="First Layout"><![CDATA[URL: https://pmndrs.github.io/uikit/getting-started/first-layout
Description: Build your first layout with uikit.


The first step for building a layout is to install the dependencies.

`npm i three @react-three/fiber @react-three/uikit @react-three/drei`

> [!TIP]
> The `@react-three/drei` dependency is not necessary but allows us to add `OrbitControls`.

Next, we create the `index.jsx` file and import the necessary dependencies.

```jsx showLineNumbers
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Container } from '@react-three/uikit'
```

Now, we can start defining the actual layout. In this example, the `Container` is of size 8 by 4 (three.js units). The `Container` has a horizontal (row) flex-direction, with 2 `Container` children, filling its width equally with a margin around them.

More in-depth information on the Flexbox properties can be found [here](https://yogalayout.dev/docs/).

```jsx {5-8} showLineNumbers=5
export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <Container backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
        <Container flexGrow={1} margin={32} backgroundColor="green" />
        <Container flexGrow={1} margin={32} backgroundColor="blue" />
      </Container>
    </Canvas>
  )
}
```

The final result will look like this:

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Container } from "@react-three/uikit";

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <Container backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
        <Container flexGrow={1} margin={32} backgroundColor="green" />
        <Container flexGrow={1} margin={32} backgroundColor="blue" />
      </Container>
    </Canvas>
  )
}`}}
/>
]]></page>
<page path="/getting-started/examples" title="Examples"><![CDATA[URL: https://pmndrs.github.io/uikit/getting-started/examples
Description: Examples made with uikit.


<Grid cols={2}>
  <li>
    [![Screenshot from Card example](./example-card.png)](https://pmndrs.github.io/uikit/examples/card/)
  </li>
  <li>
    [![Screenshot from Dashboard example](./example-dashboard.png)](https://pmndrs.github.io/uikit/examples/dashboard/)
  </li>
  <li>
    [![Screenshot from Market example](./example-market.png)](https://pmndrs.github.io/uikit/examples/market/)
  </li>
  <li>
    [![Screenshot from Lucide example](./example-lucide.png)](https://pmndrs.github.io/uikit/examples/lucide/)
  </li>
  <li>
    [![Screenshot from Auth example](./example-auth.png)](https://pmndrs.github.io/uikit/examples/auth/)
  </li>
</Grid>
]]></page>
<page path="/getting-started/components-and-properties" title="Components and Properties"><![CDATA[URL: https://pmndrs.github.io/uikit/getting-started/components-and-properties
Description: A list of all components and their properties.


## Base Properties

Just like in html/css, all uikit components have a certain properties in common, such as properties to define the position and size inside the layout, as well as, properties that are inherited, such as `color`. An overview of all available base properties can be found below.

<details>
<summary>View all base properties</summary>

| Property                         | Type                                                                                                                  |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| visibility                       | "visible" , "hidden"                                                                                                  |
| margin                           | number, Percentage, "auto"                                                                                            |
| marginX                          | number, Percentage, "auto"                                                                                            |
| marginY                          | number, Percentage, "auto"                                                                                            |
| marginTop                        | number, Percentage, "auto"                                                                                            |
| marginLeft                       | number, Percentage, "auto"                                                                                            |
| marginRight                      | number, Percentage, "auto"                                                                                            |
| marginBottom                     | number, Percentage, "auto"                                                                                            |
| transformTranslateX              | number                                                                                                                |
| transformTranslateY              | number                                                                                                                |
| transformTranslateZ              | number                                                                                                                |
| transformScaleX                  | number                                                                                                                |
| transformScaleY                  | number                                                                                                                |
| transformScaleZ                  | number                                                                                                                |
| transformOriginX                 | "left", "center", "middle", "right"                                                                                   |
| transformOriginY                 | "top", "center", "middle", "bottom"                                                                                   |
| transformRotateX                 | number                                                                                                                |
| transformRotateY                 | number                                                                                                                |
| transformRotateZ                 | number                                                                                                                |
| positionType                     | "absolute", "relative", "count"                                                                                       |
| inset                            | number, Percentage                                                                                                    |
| positionTop                      | number, Percentage                                                                                                    |
| positionLeft                     | number, Percentage                                                                                                    |
| positionRight                    | number, Percentage                                                                                                    |
| positionBottom                   | number, Percentage                                                                                                    |
| alignContent                     | "space-evenly", "space-around", "space-between", "baseline", "stretch", "flex-end", "center", "flex-start", "auto"    |
| alignItems                       | "space-evenly", "space-around", "space-between", "baseline", "stretch", "flex-end", "center", "flex-start", "auto"    |
| alignSelf                        | "space-evenly", "space-around", "space-between", "baseline", "stretch", "flex-end", "center", "flex-start", "auto"    |
| flexDirection                    | "row-reverse", "row", "column-reverse", "column"                                                                      |
| flexWrap                         | "wrap-reverse", "wrap", "no-wrap"                                                                                     |
| justifyContent                   | "space-around", "space-between", "flex-end", "center", "flex-start", "space-evenly"                                   |
| flexBasis                        | number, Percentage                                                                                                    |
| flexGrow                         | number                                                                                                                |
| flexShrink                       | number                                                                                                                |
| width                            | number, Percentage, "auto"                                                                                            |
| height                           | number, Percentage, "auto"                                                                                            |
| minWidth                         | number, Percentage                                                                                                    |
| minHeight                        | number, Percentage                                                                                                    |
| maxWidth                         | number, Percentage                                                                                                    |
| maxHeight                        | number, Percentage                                                                                                    |
| aspectRatio                      | number                                                                                                                |
| borderWidth                      | number                                                                                                                |
| borderXWidth                     | number                                                                                                                |
| borderYWidth                     | number                                                                                                                |
| borderTopWidth                   | number                                                                                                                |
| borderLeftWidth                  | number                                                                                                                |
| borderRightWidth                 | number                                                                                                                |
| borderBottomWidth                | number                                                                                                                |
| overflow                         | "visible", "scroll", "hidden"                                                                                         |
| padding                          | number, Percentage                                                                                                    |
| paddingX                         | number, Percentage                                                                                                    |
| paddingY                         | number, Percentage                                                                                                    |
| paddingTop                       | number, Percentage                                                                                                    |
| paddingLeft                      | number, Percentage                                                                                                    |
| paddingRight                     | number, Percentage                                                                                                    |
| paddingBottom                    | number, Percentage                                                                                                    |
| gap                              | number                                                                                                                |
| gapRow                           | number                                                                                                                |
| gapColumn                        | number                                                                                                                |
| receiveShadow                    | boolean                                                                                                               |
| castShadow                       | boolean                                                                                                               |
| depthTest                        | boolean                                                                                                               |
| depthWrite                       | boolean                                                                                                               |
| renderOrder                      | number                                                                                                                |
| backgroundColor                  | ColorRepresentation                                                                                                   |
| panelMaterialClass               | Material class                                                                                                        |
| borderColor                      | ColorRepresentation                                                                                                   |
| borderRadius                     | number                                                                                                                |
| borderLeftRadius                 | number                                                                                                                |
| borderRightRadius                | number                                                                                                                |
| borderTopRadius                  | number                                                                                                                |
| borderBottomRadius               | number                                                                                                                |
| borderTopLeftRadius              | number                                                                                                                |
| borderTopRightRadius             | number                                                                                                                |
| borderBottomRightRadius          | number                                                                                                                |
| borderBottomLeftRadius           | number                                                                                                                |
| borderBend                       | number                                                                                                                |
| scrollbarPanelMaterialClass      | Material class                                                                                                        |
| scrollbarColor                   | ColorRepresentation                                                                                                   |
| scrollbarWidth                   | number                                                                                                                |
| scrollbarBorderRadius            | number                                                                                                                |
| scrollbarBorderLeftRadius        | number                                                                                                                |
| scrollbarBorderRightRadius       | number                                                                                                                |
| scrollbarBorderTopRadius         | number                                                                                                                |
| scrollbarBorderBottomRadius      | number                                                                                                                |
| scrollbarBorderTopLeftRadius     | number                                                                                                                |
| scrollbarBorderTopRightRadius    | number                                                                                                                |
| scrollbarBorderBottomRightRadius | number                                                                                                                |
| scrollbarBorderBottomLeftRadius  | number                                                                                                                |
| scrollbarBorderColor             | ColorRepresentation                                                                                                   |
| scrollbarBorderBend              | number                                                                                                                |
| scrollbarBorderRightWidth        | number                                                                                                                |
| scrollbarBorderTopWidth          | number                                                                                                                |
| scrollbarBorderLeftWidth         | number                                                                                                                |
| scrollbarBorderBottomWidth       | number                                                                                                                |
| scrollbarZIndex                  | number                                                                                                                |
| zIndex                           | number                                                                                                                |
| zIndexOffset                     | number                                                                                                                |
| color                            | ColorRepresentation                                                                                                   |
| fill                             | ColorRepresentation                                                                                                   |
| opacity                          | number                                                                                                                |
| textAlign                        | "left", "center", "right", "justify"                                                                                  |
| verticalAlign                    | "top", "center", "bottom"                                                                                             |
| letterSpacing                    | number                                                                                                                |
| lineHeight                       | number                                                                                                                |
| fontSize                         | number                                                                                                                |
| wordBreak                        | "keep-all", "break-all", "break-word"                                                                                 |
| fontFamily                       | string                                                                                                                |
| fontWeight                       | number, "bold", "thin", "extra-light", "light", "normal", "medium", "semi-bold", "extra-bold", "black", "extra-black" |
| whiteSpace                       | "normal", "collapse", "pre", "pre-line"                                                                               |
| pixelSize                        | number                                                                                                                |
| sizeX                            | number                                                                                                                |
| sizeY                            | number                                                                                                                |
| caretColor                       | ColorRepresentation                                                                                                   |
| caretWidth                       | number                                                                                                                |
| caretBorderColor                 | ColorRepresentation                                                                                                   |
| caretBorderBend                  | number                                                                                                                |
| caretBorderTopLeftRadius         | number                                                                                                                |
| caretBorderTopRightRadius        | number                                                                                                                |
| caretBorderBottomLeftRadius      | number                                                                                                                |
| caretBorderBottomRightRadius     | number                                                                                                                |
| caretBorderRightWidth            | number                                                                                                                |
| caretBorderTopWidth              | number                                                                                                                |
| caretBorderLeftWidth             | number                                                                                                                |
| caretBorderBottomWidth           | number                                                                                                                |
| selectionColor                   | ColorRepresentation                                                                                                   |
| selectionWidth                   | number                                                                                                                |
| selectionBorderColor             | ColorRepresentation                                                                                                   |
| selectionBorderBend              | number                                                                                                                |
| selectionBorderTopLeftRadius     | number                                                                                                                |
| selectionBorderTopRightRadius    | number                                                                                                                |
| selectionBorderBottomLeftRadius  | number                                                                                                                |
| selectionBorderBottomRightRadius | number                                                                                                                |
| selectionBorderRightWidth        | number                                                                                                                |
| selectionBorderTopWidth          | number                                                                                                                |
| selectionBorderLeftWidth         | number                                                                                                                |
| selectionBorderBottomWidth       | number                                                                                                                |
| pointerEvents                    | "none", "auto", "listener"                                                                                            |
| pointerEventsType                | `"all", \{ allow: string, string[] \}, \{ deny: string | string[] \}, (fn)`                                        |
| pointerEventsOrder               | number                                                                                                                |
| anchorX                          | "left", "center", "middle", "right"                                                                                   |
| anchorY                          | "top", "center", "middle", "bottom"                                                                                   |
| id                               | string                                                                                                                |
| cursor                           | string                                                                                                                |
| fontFamilies                     | `Record<string, Partial<Record<FontWeight, string \| FontInfo>>>`                                                       |

</details>

**`lineHeight` Note:**

Just like in html/css, numeric line heights represent multipliers (e.g. `1.3`) while line heights with a `px` suffix represent absolute pixel values e.g. `20px`.

**`zIndexOffset` Explanation:**  
Generally using `zIndex` is recommended as it behaves just like `zIndex` in the browser. `zIndexOffset` allows to manipulate the internal default order deduced from the UI hierachy, giving the developer the option to shift the order of specific elements backwards or forwards making them appear behind or infront of other elements. Note that sibling elements are treated as having the same UI hiearchy and are therefore not explicitly ordered. Using `zIndexOffset={1}` can be faster then using `zIndex` as it allows to order sibling elements of the same type e.g. with two overlapping panels beeing siblings in the UI hiearchy.

## Container

The `Container` componet is a basic UI component that allows wrapping children and rendering a Panel into the background. It corresponds to the HTML `div` element.

```jsx showLineNumbers
<Container backgroundColor="red">
  <Text>...</Text>
  <Image src="..." />
</Container>
```

The Container has exactly all the base properties and nothing more.


## Fullscreen

The `Fullscreen` component wraps the `Container` component and binds its content directly to the viewport based on the provided `distanceToCamera`. The `Fullscreen` component automatically sets the correct pixelSize, sizeX, and sizeY properties on the `Container` component so that pixel sizes align with the pixels of the screen. In addition, the `Fullscreen` component has all the properties of the `Container` component.

```jsx showLineNumbers
<Fullscreen flexDirection="row">
  <Container flexGrow={1} backgroundColor="red" />
  <Container flexGrow={1} backgroundColor="green" />
</Fullscreen>
```

<details>
<summary>View all properties specific to the `Fullscreen` component</summary>

| Property         | Type    |
| ---------------- | ------- |
| attachCamera     | boolean |
| distanceToCamera | number  |

</details>

## Image

The `Image` component has the same properties and functionalities as a `Container` component but allows you to render an image inside it. The `Image` component corresponds to the HTML `img` element. The `Image` component has the `src` property, which can take an URL or a three.js texture. The `Image` component automatically sets the `aspectRatio` property based on the `src` property. This behavior can be turned off through `keepAspectRatio={false}`. The `objectFit` property can also be used to `cover` or `fill` the image in case the aspect ratio cannot be preserved by the layout engine or was overwritten by the user.

```jsx showLineNumbers
<Image src="example.jpg" width={100} />
```

<details>
<summary>View all properties specific to the `Image` component</summary>

| Property        | Type            |
| --------------- | --------------- |
| src             | string, Texture |
| objectFit       | "fill", "cover" |
| keepAspectRatio | boolean         |

</details>

## SuspendingImage

The default image doesn't use react's suspense but rather loads the image silently. To explicitly control how the image behaves when loaded, use the `SuspendingImage` component. The component can be used to display a fallback component while the image is loading. It has the same properties as the `Image` component.

```jsx showLineNumbers
<Suspense
  fallback={
    <Container width={200} aspectRatio={1} alignItems="center" justifyContent="center">
      <LoadingSpinner />
    </Container>
  }
>
  <SuspendingImage src="..." width={200} />
</Suspense>
```

## Portal

The `Portal` component uses the `Image` component under the hood to render its children into a render target, which is displayed on the surface of the `Portal` component. In contrast to the `Image` component, the `Portal` component doesn't have a default `aspectRatio` or an `src` property. The size of the portal is completly controlled through the flexbox properties, the resolution of the portal is equal to the size multiplied by the `dpr` property, which defaults to the system `dpr`.

```jsx showLineNumbers
<Portal width={200} aspectRatio={1}>
  <mesh>
    <boxGeometry />
    <meshBasicMaterial color="red" />
  </mesh>
</Portal>
```

## Video

The `Video` component has the same properties and functionalities as a `Image` component but allows you to render an video inside it. The `Video` component corresponds to the HTML `video` element. The `Video` component has the `src`, `volume`, `preservesPitch`, `playbackRate`, `muted`, `loop`, and `autoplay` property to setip the video and can even be used to play media streams.

To control playing the video the `Video` provide the html video element through a provide, that can be consumed by its children through `useVideoElement` to create video controls. Additionally, the html video element can be received from the parent of the `Video` using `ref.current.element`.

```jsx showLineNumbers
<Video src="example.mp4" autoplay width={100} />
```

<details>
<summary>View all properties specific to the `Video` component</summary>

| Property       | Type                |
| -------------- | ------------------- |
| src            | string, MediaStream |
| volume         | number              |
| preservesPitch | boolean             |
| playbackRate   | number              |
| muted          | boolean             |
| loop           | boolean             |
| autoplay       | boolean             |
| playsInline    | boolean             |
| crossOrigin    | string              |

</details>

## Text

The `Text` component allows you to render of text and is highly intertwined with the layout engine to allow the layout engine to measure and influence the text layout (e.g., how the text should be broken up).The `Text` component has exactly the base properties, since properties such as `fontWeight` are inherited and therefor available on all components.

```jsx showLineNumbers
<Text fontWeight="bold">Hello World!</Text>
```

## Input

The `Input` component extends the `Text` component and allows the user to change the text through their preferred input device. The `Input` component has all the formatting capabilities as the `Text` element. Additionally, it allows specifying whether the input is `disabled,` the current `value,` the `defaultValue,` an `onValueChange` listener, and the `tabIndex` to customize the tab order.

```jsx showLineNumbers
<Input fontWeight="bold" defaultValue="Hello World" />
```

<details>
<summary>View all properties specific to the `Input` component</summary>

| Property      | Description              |
| ------------- | ------------------------ |
| placeholder   | string                   |
| value         | string                   |
| autocomplete  | string                   |
| onFocusChange | (focus: boolean) => void |
| defaultValue  | string                   |
| onValueChange | (value: string) => void  |
| tabIndex      | number                   |
| disabled      | boolean                  |
| type          | "text", "password"       |

|

</details>

## Textarea

The `Textarea` component extends the `Input` component but supports multi-line inputs.

```jsx showLineNumbers
<Textarea fontWeight="bold" defaultValue="Hello World" />
```

## Svg

The `Svg` component allows rendering an Svg file. The URL of the file is provided in the `src` property. Alternatively, the content of the svg file cant directly be provided to the component instead of the url using the `content` property.

```jsx showLineNumbers
<Svg src="..." width={100} />
```

<details>
<summary>View all properties specific to the `SVG` component</summary>

| Property | Type   |
| -------- | ------ |
| src      | string |
| content  | string |

</details>

## Content

The `Content` component allows you to include any R3F/Three.js element into the layout. Since the children inside the `Content` component can be 3-dimensional objects, their alignment on the z-axis can be controlled with the `depthAlign` property. By default the content will preserve the aspect ratio of the 3D objects. In case the 3D objects should be sized independent from its aspect ratio, set `keepAspectRatio={false}`.

```jsx showLineNumbers
<Content width={100}>
  <Gltf src="..." />
</Content>
```

<details>
<summary>View all properties specific to the `Content` component</summary>

| Property        | Type                      |
| --------------- | ------------------------- |
| depthAlign      | "back", "center", "front" |
| keepAspectRatio | boolean                   |

</details>

## CustomContainer

The `CustomContainer` component integrates a 2D panel with a custom material into the UI. The component is not instanced but provides complete control over the material of the panel.

```jsx showLineNumbers
<CustomContainer width={200} height={200}>
  <shaderMaterial fragmentShader="" vertexShader="" />
</CustomContainer>
```

## Default and Important Properties

In some cases you might want to overwrite the defaults for all descendants inside a component or need to overwrite set a property with a higher precendence then a property from a `hover` conditional.

Using the `'*'` property, you can set properties that overwrite the default for all descendants.

```jsx showLineNumbers
<Fullscreen flexDirection="column" gap={8} {...{ '*': { backgroundColor: 'red' } }}>
  <Container width={64} height={64} />
  <Container width={64} height={64} />
</Fullscreen>
```

In certain cases you want to make sure a property is applied even if there is a `hover` conditional writing the same property. In this case, you can use `important`.

```jsx showLineNumbers
<Container hover={{ backgroundColor: 'green' }} important={{ backgroundColor: 'red' }} />
```

## Conditional Properties

uikit allows you to declare properties that depend on the element's interaction state, similar to CSS selectors, such as `:hover`. Conditional properties also enable elements in the layout to be responsive based on several breakpoints. uikit supports a range of conditional properties:

| Name        | Explanation                                                                |
| ----------- | -------------------------------------------------------------------------- |
| focus       | when the user has focussed the element (currently only available on input) |
| hover       | when the user hovers over the element                                      |
| active      | when the users clicks (pointer down) on the element                        |
| sm          | when the width of the root element is bigger than 640                      |
| md          | when the width of the root element is bigger than 768                      |
| lg          | when the width of the root element is bigger than 1024                     |
| xl          | when the width of the root element is bigger than 1280                     |
| 2xl         | when the width of the root element is bigger than 1536                     |
| dark        | when the preferred color scheme is dark                                    |
| placeholder | when the input component's value is currently empty                        |

```jsx showLineNumbers
<Fullscreen flexDirection="column" md={{ flexDirection: 'row' }}>
  <Container flexGrow={1} backgroundColor="red" />
  <Container flexGrow={1} backgroundColor="green" />
</Fullscreen>
```

## Preferred Color Schemes

By default, uikit inherits the preferred color scheme from the browser. Developers and designers can use the preferred color scheme to support users' preference for dark and light modes. The preferred color scheme can be controlled using `setPreferredColorScheme` and `getPreferredColorScheme`. The function `basedOnPreferredColorScheme` lets you create themes containing colors that change depending on the preferred color scheme. See also the [Globals page](./globals.mdx#preferred-color-scheme) for full API details.

```jsx showLineNumbers
setPreferredColorScheme("light")

const theme = basedOnPreferredColorScheme({
  light: {
    primary: "red"
  },
  dark: {
    primary: "green"
  }
})

<Container backgroundColor={theme.primary} width={100} height={100} />
```

### withOpacity

When composing colors, you can derive an alpha-adjusted color using `withOpacity(color, opacity)`. It returns a reactive color value (signal) that updates if either the base color or the opacity is reactive.

```tsx showLineNumbers
import { withOpacity } from '@pmndrs/uikit'

const translucent = withOpacity('#000', 0.35)

// usage
<Container backgroundColor={translucent} />
```

`withOpacity` accepts plain colors (`'#fff'`, numbers, `THREE.Color`, tuples) or `ReadonlySignal<ColorRepresentation>`, and an opacity number or `Signal<number>`.

See also: [Globals](./globals.mdx).

## Event Properties

All Components support [all R3F event handlers](https://docs.pmnd.rs/react-three-fiber/api/events). Additionally, event handlers for `onSizeChange`, `onIsClippedChange`, and `onScroll` can be added to all components.

<details>
<summary>View all event handlers</summary>

| Property          | Type                                                                                                                                          |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| onWheel           | `(event: ThreeEvent<WheelEvent>) => void`                                                                                                     |
| onPointerUp       | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerOver     | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerOut      | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerMove     | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerLeave    | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerEnter    | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerDown     | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onPointerCancel   | `(event: ThreeEvent<PointerEvent>) => void`                                                                                                   |
| onDblClick        | `(event: ThreeEvent<MouseEvent>) => void`                                                                                                     |
| onContextMenu     | `(event: ThreeEvent<MouseEvent>) => void`                                                                                                     |
| onClick           | `(event: ThreeEvent<MouseEvent>) => void`                                                                                                     |
| onSizeChange      | `(width: number, height: number) => void`                                                                                                     |
| onIsClippedChange | `(isClipped: boolean) => void`                                                                                                                |
| onScroll          | `(scrollX: number, scrollY: number, scrollPosition: Signal<Vector2Tuple>, event?: ThreeEvent<WheelEvent \| PointerEvent>) => boolean \| void` |

</details>

## Ref

Using a `ref`, react developers can get access to the uikit component to imperatively change properties or access internal values. A full overview over all methods and properties exposed on all uikit component can be found [here](./vanilla.md#the-uikit-component).
]]></page>
<page path="/getting-started/globals" title="Globals"><![CDATA[URL: https://pmndrs.github.io/uikit/getting-started/globals
Description: Global APIs to control defaults, classes, and color scheme.


### Overview

uikit exposes a few global utilities that influence styling and behavior across your UI:

- `setGlobalProperties`, `resetGlobalProperties`
- `StyleSheet` (global class registry)
- `setPreferredColorScheme`, `getPreferredColorScheme`, `basedOnPreferredColorScheme`, `isDarkMode`

These are framework-agnostic (work in `@pmndrs/uikit` and `@react-three/uikit`).

### Global properties

Use `setGlobalProperties` to set default properties that apply to all components. This is useful for global defaults such as `fontFamilies`, base `color`, `pixelSize`, or shared layout values. Later calls merge into existing defaults; use `resetGlobalProperties` to overwrite.

```tsx showLineNumbers
import { setGlobalProperties, resetGlobalProperties } from '@pmndrs/uikit'

// set or merge global defaults
setGlobalProperties({
  color: '#222',
  fontFamilies: { default: { normal: '/fonts/Inter-Medium.woff' } },
})

// completely replace the global defaults
resetGlobalProperties({
  color: 'white',
})
```

- **Merge behavior**: `setGlobalProperties(next)` merges on top of the current global properties, while `resetGlobalProperties(next)` replaces them entirely.
- **Precedence**: component props > conditional props > `'*'` star props > global properties. Globals provide the lowest-precedence defaults.

### Global `StyleSheet`

`StyleSheet` is a global map of reusable classes. You can define named styles once and assign them via a component's `classList` (string names) or by passing inline objects.

```tsx showLineNumbers
import { StyleSheet } from '@pmndrs/uikit'

// define classes globally
StyleSheet.button = {
  paddingX: 12,
  paddingY: 8,
  borderRadius: 8,
}

StyleSheet['btn-primary'] = {
  backgroundColor: '#2563eb',
  color: 'white',
}

// usage in React
import { Container, Text } from '@react-three/uikit'

function Button({ children }) {
  return (
    <Container classList={['button', 'btn-primary']}>
      <Text>{children}</Text>
    </Container>
  )
}
```

Notes:
- Unknown class names log a warning and are ignored.
- `classList` also accepts inline objects: `classList={[{ opacity: 0.8 }]}`.
- Element `id` styles can be predeclared via `StyleSheet['__id__myId'] = { ... }` and will auto-apply to elements with `id="myId"`.

### Preferred color scheme

Control or react to dark/light mode preferences.

```tsx showLineNumbers
import {
  setPreferredColorScheme,
  getPreferredColorScheme,
  basedOnPreferredColorScheme,
  isDarkMode,
} from '@pmndrs/uikit'

setPreferredColorScheme('light') // 'light' | 'dark' | 'system'
console.log(getPreferredColorScheme())

const theme = basedOnPreferredColorScheme({
  light: { background: 'white', foreground: '#222' },
  dark: { background: '#111', foreground: 'white' },
})

// Signals update when the scheme changes
// e.g. <Container backgroundColor={theme.background} color={theme.foreground} />
```

If you need a boolean in computed values, use `isDarkMode`.

### Related

- Learn about conditional properties like `dark` in [Components and Properties](./components-and-properties.md#conditional-properties).
- See the color-scheme basics in [Preferred Color Schemes](./components-and-properties.md#preferred-color-schemes).


]]></page>
<page path="/getting-started/vanilla" title="Vanilla Three.js"><![CDATA[URL: https://pmndrs.github.io/uikit/getting-started/vanilla
Description: Build your first layout with uikit and vanilla threejs.


The vanilla version of uikit allows to build user interfaces with plain Three.js.

### Differences to @react-three/uikit

The vanilla version of uikit (`@pmndrs/uikit`) is the core part of uikit while the react version is a slim wrapper around it. Therefore all features that are available in react are available in vanilla threejs. The only difference is that, since three.js ships no event system, no event system is available out of the box. For interactivity, such as hover effects, attach a pointer event system that emits W3C-compatible events to your UI elements. We recommend [@pmndrs/pointer-events](https://github.com/pmndrs/xr/tree/main/packages/pointer-events#readme).

## The uikit `Component`

All uikit components have a common base class (`Component`), which exposes a set of common properties and functions that allow to access internals and extend uikit's functionality to your use case.

### Properties

| Name                           | Type                                      | Description                                                       |
| ------------------------------ | ----------------------------------------- | ----------------------------------------------------------------- |
| `handlers`                     | `ReadonlySignal<EventHandlersProperties>` | Readonly event handlers attached to the component.                |
| `orderInfo`                    | `Signal<OrderInfo, undefined>`            | Render and layout ordering metadata.                              |
| `isVisible`                    | `Signal<boolean>`                         | Whether the component is currently visible after layout/clipping. |
| `isClipped`                    | `Signal<boolean>`                         | Whether the component is clipped by an ancestor.                  |
| `boundingSphere`               | `Sphere`                                  | World-space bounds used for culling and hit testing.              |
| `properties`                   | `Properties<OutProperties>`               | Computed, resolved properties (e.g. margins, padding, colors).    |
| `starProperties`               | `Properties<OutProperties>`               | Internal resolved properties snapshot.                            |
| `node`                         | `FlexNode`                                | Underlying Yoga flexbox node.                                     |
| `size`                         | `Signal<Vector2Tuple,undefined>`          | Current layout size; populated after an `update`.                 |
| `relativeCenter`               | `Signal<Vector2Tuple,undefined>`          | Center within local panel coordinates.                            |
| `borderInset`                  | `Signal<Inset,undefined>`                 | Computed border insets.                                           |
| `overflow`                     | `Signal<Overflow>`                        | Overflow behavior for children.                                   |
| `displayed`                    | `Signal<boolean>`                         | Whether the component participates in rendering.                  |
| `scrollable`                   | `Signal<[boolean, boolean]>`              | Horizontal/vertical scrollability flags.                          |
| `paddingInset`                 | `Signal<Inset,undefined>`                 | Computed padding insets.                                          |
| `maxScrollPosition`            | `Signal<Partial<Vector2Tuple>>`           | Maximum scroll positions.                                         |
| `root`                         | `Signal<RootContext>`                     | Root context reference.                                           |
| `parentContainer`              | `Signal<Container,undefined>`             | Parent container, if any.                                         |
| `hoveredList`                  | `Signal<Array<number>>`                   | Internal hover id stack.                                          |
| `activeList`                   | `Signal<Array<number>>`                   | Internal active id stack.                                         |
| `ancestorsHaveListenersSignal` | `Signal<boolean>`                         | Whether any ancestor listens for events.                          |
| `globalMatrix`                 | `Signal<Matrix4, undefined>`              | World transform.                                                  |
| `globalPanelMatrix`            | `Signal<Matrix4,undefined>`               | Panel-space world transform.                                      |
| `abortSignal`                  | `AbortSignal`                             | Abort signal tied to this component's lifecycle.                  |
| `classList`                    | `ClassList`                               | Utility to add/remove CSS-like classes.                           |

### Methods

- `setProperties(inputProperties: InProperties<OutProperties>): void` — update/extend the component's properties; triggers re-layout as needed.
- `resetProperties(inputProperties?: InProperties<OutProperties>): void` — reset properties to defaults (optionally applying new inputs).
- `update(delta: number): void` — advance layout and internal state by `delta` milliseconds.
- `dispose(): void` — free resources held by the component.

### Key points

- Call `update(delta)` only on the root component (the one whose parent is a non‑uikit object, e.g. a Three.js `Object3D`).
- Use `setProperties(...)` to extend or edit current properties; values are merged with inherited defaults and will be reflected after the next `update`.
- Read `size` to get the computed layout size of a component after an `update`.
- Use `properties` to inspect computed values such as margins and padding.

## Building a user interface with `@pmndrs/uikit`

The first step is to install the dependencies.

```bash
pnpm add three @pmndrs/uikit
```

Next, create the `index.ts` file and import the necessary dependencies and set up a threejs scene.

```ts
import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
import { reversePainterSortStable, Container } from '@pmndrs/uikit'

const camera = new PerspectiveCamera(70, 1, 0.01, 100)
camera.position.z = 10
const scene = new Scene()
const canvas = document.getElementById('root') as HTMLCanvasElement
const renderer = new WebGLRenderer({ antialias: true, canvas })
```

Now, we can start defining the actual layout. In this example, the `Container` is of size 8 by 4 (three.js units). The `Container` has a horizontal (row) flex-direction, with 2 `Container` children, filling its width equally with a margin around them.

More in-depth information on the Flexbox properties can be found [here](https://yogalayout.dev/docs/).

```ts
// Root container – add it to the scene; call root.update in your loop
const root = new Container({
  backgroundColor: "red",
  sizeX: 8,
  sizeY: 4,
  flexDirection: "row",
})
scene.add(root)

const container1 = new Container({
  flexGrow: 1,
  margin: 32,
  backgroundColor: "green",
})
root.add(container1)

const container2 = new Container({
  flexGrow: 1,
  margin: 32,
  backgroundColor: "blue",
})
root.add(container2)
```

All properties of the user interface elements can be modified using `container.setProperties({...})`. The last step is to setup the frameloop, setup resizing, enable local clipping, and setup the transparency sort required for uikit. Notice that the root component needs to be updated every frame using `root.update(delta)`.

```ts
renderer.setAnimationLoop(animation)
renderer.localClippingEnabled = true
renderer.setTransparentSort(reversePainterSortStable)

function updateSize() {
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
}

updateSize()
window.addEventListener('resize', updateSize)

let prev: number | undefined
function animation(time: number) {
  const delta = prev == null ? 0 : time - prev
  prev = time
  root.update(delta)
  renderer.render(scene, camera)
}
```

If you use Vite, install and run it:

```bash
pnpm add -D vite
pnpm vite
```

Create an `index.html` file, add the following content:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="index.ts"></script>
  </head>
  <body style="margin: 0;">
    <div id="root" style="width: 100dvw; height: 100dvh;"></div>
  </body>
</html>
```

The result should look like this

![Two containers in a row layout - one red and one blue with hover effects](./basic-example.gif)

### Disposing

Call `dispose()` on elements to free resources (non recursive):

```js
root.dispose()
```
]]></page>
<page path="/tutorials/interactivity" title="Interactivity"><![CDATA[URL: https://pmndrs.github.io/uikit/tutorials/interactivity
Description: How to make the UI elements interactive.


Every UI component can receive the same events as [any other R3F element](https://docs.pmnd.rs/react-three-fiber/api/events). In addition to these event listeners, uikit provides properties such as `hover` and `active` for all components. These properties allow the element to overwrite other properties if it is hovered or clicked.

The following example shows a Container element that is `black` by default turns `red` when the user hovers and is `green` as long as the user clicks on it.

```jsx
<Container
  backgroundColor="black"
  hover={{ backgroundColor: 'red' }}
  active={{ backgroundColor: 'green' }}
  sizeX={1}
  sizeY={1}
/>
```

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Container } from "@react-three/uikit";

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <Container
        backgroundColor="black"
        hover={{ backgroundColor: 'red' }}
        active={{ backgroundColor: 'green' }}
        sizeX={1}
        sizeY={1}
      />
    </Canvas>
  )
}`}}
/>
]]></page>
<page path="/tutorials/responsive" title="Responsive"><![CDATA[URL: https://pmndrs.github.io/uikit/tutorials/responsive
Description: How to make the ui elements responsive.


Building responsive UIs in uikit is inspired by [responsiveness in tailwind](https://tailwindcss.com/docs/responsive-design). Using the concept of breakponts UI elements can be styled based on the size of the root element. These breakpoints are
- `sm` (min root width: 640px)
- `md` (min root width: 768px)
- `lg` (min root width: 1024px)
- `xl` (min root width: 1280px)
- `2xl` (min root width: 1536px)

```jsx showLineNumbers
<Container
    flexDirection="column"
    md={{ flexDirection: "row" }}
>
```

This code defines a container that, by default, puts its positions its children in a vertical column, but puts them in a horizontal row once the width of the root container exceeds 768px.
]]></page>
<page path="/tutorials/scroll" title="Scrolling"><![CDATA[URL: https://pmndrs.github.io/uikit/tutorials/scroll
Description: How to use overflow, scrolling, and clipping.


uikit handles clipping and scrolling out of the box by specifying `overflow="scroll"` or `overflow="hidden"` on any UI element.

However, it is required to configure three.js to support visual clipping, which is done via

```jsx
<Canvas gl={{ localClippingEnabled: true }}>
```

## onScroll

If a `Container` component uses `overflow="scroll"`, the `onScroll` event is called when the user scrolls through their scroll wheel or touching. `onScroll` receives the new `x` and `y` coordinates for the scroll position, the signal containing the current `scrollPosition`, and the optional event that caused the scrolling. The listener passed to `onScroll` can return `false` to prevent setting the new `x` and `y` scroll position.

## Scrollbars

uikit renders scrollbars if the content overflows an element that has the property `overflow="scroll"`. The scrollbar can be styled similarly to the background panel of any component via the following properties.

| Property                         | Type                |
| -------------------------------- | ------------------- |
| scrollbarPanelMaterialClass      | Material class      |
| scrollbarColor                   | ColorRepresentation |
| scrollbarWidth                   | number              |
| scrollbarBorderRadius            | number              |
| scrollbarBorderLeftRadius        | number              |
| scrollbarBorderRightRadius       | number              |
| scrollbarBorderTopRadius         | number              |
| scrollbarBorderBottomRadius      | number              |
| scrollbarBorderTopLeftRadius     | number              |
| scrollbarBorderTopRightRadius    | number              |
| scrollbarBorderBottomRightRadius | number              |
| scrollbarBorderBottomLeftRadius  | number              |
]]></page>
<page path="/tutorials/sizing" title="Sizing"><![CDATA[URL: https://pmndrs.github.io/uikit/tutorials/sizing
Description: How to size elements and use pixelSize, sizeX, and sizeY.


**TLDR**: The size of the root uikit element can be defined in three.js units through the optional `sizeX` and `sizeY` parameters. The `pixelSize` parameter allows you to define how big one pixel in the UI is in relation to one three.js unit.


**Important**

The `pixelSize` should be set so that the default font height (`16px`) is reasonably sized. All pre-built components adhere to this sizing concept.

<details>
  <summary>In Depth Explanation</summary>

  The root element size is specified in three.js units using the optional `sizeX` and `sizeY` parameters.
  
  Declaring the size of elements inside the root element using parameters, such as the `width` of an image or the `fontSize` of a text element, is based on `pixel` units, which strongly relate to the `px` unit in CSS. The relation between three.js units and pixel units can be set using the `pixelSize` property. The property expresses the size of one pixel in three.js units and defaults to `0.01`. With this default, `100px` is equal to 1 three.js unit. To make interoperability between code bases and different component libraries easier, we encourage to use the intuition of pixel sizes from the web. For instance, the default text height relates to 16 pixels. If these pixel sizes appear too small or too high in the szene, the `pixelSize` should be increased or decreased respectively.
</details>
]]></page>
<page path="/tutorials/custom-materials" title="Custom Materials"><![CDATA[URL: https://pmndrs.github.io/uikit/tutorials/custom-materials
Description: How to use custom materials in uikit.


uikit allows to provide custom material classes for the background and border on the `Text`, `Container`, and `Image` components. This allows to change the appearance and use more complex (and computationally expensive) materials such as a `MeshPhysicalMaterial`.

In the following example, we are creating a text element with a material based on the phong material with high specular and shininess. Using the border properties, we can create a border that creates the illusion of a 3D Mesh. Specifically, the `borderBend` property allows bending the normals on the border to create this effect efficiently.

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{"/App.tsx": `import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Text } from '@react-three/uikit'
import { MeshPhongMaterial } from 'three'

class FancyMaterial extends MeshPhongMaterial {
  constructor() {
    super({
      specular: 0x111111,
      shininess: 100,
    })
  }
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <directionalLight position={[1,0,1]} intensity={10} />
      <Text
        backgroundColor="black"
        color="white"
        padding={24}
        borderRadius={32}
        fontSize={32}
        borderColor="black"
        borderBend={0.3}
        borderWidth={8}
        panelMaterialClass={FancyMaterial}
      >
        I look fancy
      </Text>
    </Canvas>
  )
}`}}
/>

Let's go through the above example step by step. First, we are importing the necessary dependencies.

```tsx showLineNumbers
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Text } from '@react-three/uikit'
import { MeshPhongMaterial } from 'three'
```

Then, we create a class for the material we want to adapt by changingthe default values.

```tsx showLineNumbers=5
class FancyMaterial extends MeshPhongMaterial {
  constructor() {
    super({
      specular: 0x111111,
      shininess: 100,
    })
  }
}
```

Lastly, the UI can be defined using a `Text` component.

```tsx {15} showLineNumbers=15
export default function App() {
  return (
    <Canvas>
      <OrbitControls />
      <Text
        backgroundColor="black"
        color="white"
        padding={24}
        borderRadius={32}
        fontSize={32}
        borderColor="black"
        borderBend={0.3}
        borderWidth={8}
        panelMaterialClass={FancyMaterial}
      >
        I look fancy
      </Text>
    </Canvas>
  )
}
```
]]></page>
<page path="/tutorials/custom-fonts" title="Custom Fonts"><![CDATA[URL: https://pmndrs.github.io/uikit/tutorials/custom-fonts
Description: How to build, set up, and use custom fonts.


The `Text` component supports custom fonts. By default, uikit provides Inter. There are two ways to add your own:

| Approach                                   | Best for                        | Tradeoff                             |
| ------------------------------------------ | ------------------------------- | ------------------------------------ |
| [Runtime TTF](#runtime-ttf-loading)        | Dynamic fonts, fast iteration   | ~444KB loader, ~100-300ms generation |
| [Pre-generated](#pre-generated-msdf-fonts) | Static fonts, production builds | One-time setup, no runtime cost      |

Under the hood, fonts are rendered using MSDF (multi-channel signed distance fields).

## Runtime TTF Loading

Load TTF files directly at runtime using the built-in `TTFLoader` (vanilla) or `useTTF` hook (React). These convert TTF fonts to MSDF format on-the-fly using WebAssembly.

### React Three Fiber

```jsx showLineNumbers
import { Suspense } from 'react'
import { useTTF, Fullscreen, Text } from '@react-three/uikit'

function UI() {
  const fontFamilies = useTTF('/fonts/Roboto.ttf')

  return (
    <Fullscreen fontFamilies={fontFamilies}>
      <Text fontSize={24}>Hello World</Text>
    </Fullscreen>
  )
}

function App() {
  return (
    <Suspense fallback={null}>
      <UI />
    </Suspense>
  )
}
```

### Vanilla Three.js

```js showLineNumbers
import { TTFLoader, Container, Text } from '@pmndrs/uikit'

const loader = new TTFLoader()
const fontFamilies = await loader.loadAsync('/fonts/Roboto.ttf')

const root = new Container({ fontFamilies })
const text = new Text({ fontSize: 24, text: 'Hello World' })
root.add(text)
```

### Multiple Fonts

Load multiple TTF files at once by passing an array:

```jsx showLineNumbers
// React
const fontFamilies = useTTF(['/fonts/Roboto.ttf', '/fonts/NotoSansJP.ttf'])

// Vanilla
const fontFamilies = await loader.loadAsync(['/fonts/Roboto.ttf', '/fonts/NotoSansJP.ttf'])
```

### Options

| Option        | Default                   | Description                                              |
| ------------- | ------------------------- | -------------------------------------------------------- |
| `charset`     | `A-Za-z0-9` + punctuation | Characters to include in the atlas                       |
| `fontSize`    | `48`                      | Glyph rasterization resolution (higher = more detail)    |
| `textureSize` | `[512, 512]`              | Atlas dimensions `[width, height]`                       |
| `fieldRange`  | `4`                       | Max encoded distance in pixels (higher = smoother edges) |
| `fixOverlaps` | `true`                    | Fix overlapping contours in glyphs                       |

---

## Pre-generated MSDF Fonts

There are two ways to generate MSDF fonts ahead of time: using a web-based tool or using local tooling. The web-based option is simpler and doesn't require installing any software.

### Option 1: Web-based Tool

You can use the MSDF Generator at https://msdf.zap.works/ to convert your TTF font to MSDF format.

#### Steps:

1. Download a `.ttf` file for the font family with the correct weights (e.g., `roboto-medium.ttf`).
2. Open [https://msdf.zap.works/](https://msdf.zap.works/) in your browser.
3. Upload your `.ttf` file.
4. Click "Generate".
5. The tool will generate a JSON file with the texture inlined as a base64 data URL.
6. Download the generated JSON file.

The generated JSON file contains the MSDF texture embedded inline, so you don't need to manage separate texture files.

### Option 2: Local Tooling

If you prefer to use local tooling or need more control over the generation process, you can use [msdf-bmfont-xml](https://www.npmjs.com/package/msdf-bmfont-xml).

This example shows how to compile the `Roboto` font family with the weight `medium`.

The first step is to download a `.ttf` file for the font family with the correct weights. After downloading the font to `roboto.ttf`, the overlaps need to be removed.

> This is necessary because msdf-bmfont has a problem with overlapping paths, creating weird artifacts.

##### Linux

```bash
fontforge -lang=ff -c 'Open($1); SelectAll(); RemoveOverlap(); Generate($2)' roboto.ttf fixed-roboto.ttf
```

##### Windows

1. Install [FontForge](https://fontforge.org/en-US/downloads/windows-dl/).
2. Open the `.ttf` font.
3. Select all the characters using `CTRL+A` or navigating to `Edit > Select > Select All`.
4. Remove overlap using `CTRL+Shift+O` or navigating to `Element > Overlap > Remove Overlap`.
5. Generate fonts using `CTRL+Shift+G` or navigating to `File > Generate font(s)` in Truetype (`.ttf`) font.
   > Tip: give a new name to the new generated font.

#### Generating the msdf font

Next, we use `msdf-bmfont` to convert the `.ttf` file to a texture and a `.json` file. For that we need the _FontForge_ generated font and a charset file containing all the characters we want to include in our msdf-font.

```bash
npx msdf-bmfont -f json fixed-roboto.ttf -i charset.txt -m 256,512 -o public/roboto -s 48
```

example charset.txt:

```txt
 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!?.,;:'"()-[]{}@#$%&*+=/\<>
```

> [!IMPORTANT]
> Only a single texture file is supported by uikit, so make sure the generated texture is a single file. Otherwise adjust the texture by increasing the resolution or by decreasing the font size.

#### Inlining the texture

If you are using some kind of hashes in your filenames, you won't be able to use the separate texture. In that case you need to inline the texture in the `.json` file. Here's a sample script to do it:

```ts showLineNumbers
import { writeFile } from 'fs/promises'
import generateBMFont from 'msdf-bmfont-xml'

const charset = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!?.,;:\'"()-[]{}@#$%&*+=/\\<>'

generateBMFont(
  'src/assets/fonts/Inter-Bold.woff',
  {
    smallSize: true,
    charset,
    outputType: 'json',
  },
  async (
    error: Error | undefined,
    textures: { filename: string; texture: Buffer }[],
    font: { filename: string; data: string },
  ) => {
    if (error) {
      throw error
    }
    const pages = await Promise.all(
      textures.map((texture) => 'data:image/png;base64,' + texture.texture.toString('base64')),
    )
    const json = JSON.parse(font.data)

    json.pages = pages
    await writeFile(font.filename, JSON.stringify(json))
  },
)
```

### Implementing the generated font

Once you have generated the JSON file (using either method), you can add the font family via the `fontFamilies` property.

For web-generated fonts (Option 1), the texture is already inlined in the JSON file. For locally-generated fonts (Option 2), it's necessary to host the `.json` file and the texture on the same URL and provide the URL to the `.json` file to the `fontFamilies` property.

Repeat the previous process for other weights, such as bold, to support different weights.

```tsx showLineNumbers
<Container
  fontFamilies={{
    roboto: {
      medium: 'url-to-medium.json',
      bold: 'url-to-bold.json',
    },
  }}
>
  <Text fontFamily="roboto">Test123</Text>
</Container>
```
]]></page>
<page path="/advanced/pitfalls" title="Pitfalls"><![CDATA[URL: https://pmndrs.github.io/uikit/advanced/pitfalls
Description: Pitfalls to avoid when building userinterfaces with uikit


## Asynchronous Objects inside `Content`

The `Content` component measures its content when the component is created. If the content is loaded asynchronous, this measurement will be incorrect. To prevent this behavior, suspense boundaries must be placed correctly.

<table>
<tr><td>❌ incorrect</td><td>✅ correct</td></tr>
<tr>
<td>

```jsx {2,4} showLineNumbers
<Content>
    <Suspense>
        <Gltf src="...">
    </Suspense>
</Content>
```

</td>
<td>

```jsx {1,5} showLineNumbers
<Suspense>
    <Content>
        <Gltf src="...">
    </Content>
</Suspense>
```

</td>
</tr>
</table>

## Non-Transparent Objects inside `Content`

To render objects in the correct order, we are using a custom transparent object sorter. Therefore, all objects inside uikit must either be transparent or must write to the depth buffer and should have a small offset in the z-axis towards its parent.]]></page>
<page path="/advanced/performance" title="Performance"><![CDATA[URL: https://pmndrs.github.io/uikit/advanced/performance
Description: Important considerations for building performant user interfaces with uikit.


## Avoid React Re-renders

When frequently changing properties of uikit components and especially when animating properties on every frame. We recommend modifying properties using `ref.current.setProperties({ ... })` or using a signal.

### using `ref.current.setProperties`

This approach is similar to html/css. The following code shows how to animate the background color on every frame without interfering with react.

```jsx showLineNumbers
import { Container } from '@react-three/uikit'
import { useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import { signal } from '@preact/signals-core'

export function AnimateBackground() {
  const ref = useRef()
  useFrame(({ clock }) => {
    //continuously animate between 0 and 1
    ref.current.setProperties({ backgroundColor: `rgba(255, 255, 255, ${Math.sin(clock.getElapsedTime()) / 2 + 0.5})` })
  })
  return <Container ref={ref} backgroundColor="rgba(255, 255, 255, 0)"></Container>
}
```

Setting executing `resetProperties({})` resets all changes back to the initial properties provided to the directly to the component.

### using signals

This approach is similar to react-spring and allows to modify the properties of a uikit component without any property diffing. The following code shows how to animate the background color on every frame without interfering with react.

```jsx showLineNumbers
import { Container } from '@react-three/uikit'
import { useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import { signal } from '@preact/signals-core'

export function AnimateBackground() {
  const backgroundColor = useMemo(() => signal(0), [])
  useFrame(({ clock }) => {
    //continuously animate between 0 and 1
    backgroundColor.value = `rgba(255, 255, 255, ${Math.sin(clock.getElapsedTime()) / 2 + 0.5})`
  })
  return <Container backgroundColor={backgroundColor}></Container>
}
```

## Avoid Custom MaterialClasses

The amount of different Material Classes used, directly influences the amount the draw calls. For every new material class, a new draw call has to be on every render. Therefore, we recommend using as little as possible different custom material classes.

## Avoid Many Font Families

Like the material classes, each new font family directly results in one additional draw call. Therefore, minimizing the amount of font families is recommended for GPU Performance.
]]></page>
<page path="/advanced/types" title="Types"><![CDATA[URL: https://pmndrs.github.io/uikit/advanced/types
Description: How to configure the types to align with the event system you are using.


Since the uikit project is event-system-agnostic, you might use uikit with a different event system than everyone else. Therefore, it is important to be able to specify the shape of your event types so they align with the types of your event handlers.

You can customize events by extending the `Object3DEventMap` interface as shown below through adding the following module declaration before importing anything from uikit.


```ts
declare module 'three' {
  interface Object3DEventMap {
    pointermove: YourEventType
    pointercancel: YourEventType
    pointerdown: YourEventType
    pointerup: YourEventType
    pointerenter: YourEventType
    pointerleave: YourEventType
    pointerover: YourEventType
    pointerout: YourEventType
    click: YourEventType
    dblclick: YourEventType
    contextmenu: YourEventType
    wheel: YourEventType
  }
}

```

This modification is also demonstrated in the dashboard example. You can find its source code [here](https://github.com/pmndrs/uikit/tree/main/examples/dashboard). In the example, we are using the event types from `@pmndrs/pointer-events`, which automatically extends the `Object3DEventMap`, therefore, it is only important to import `@pmndrs/pointer-events` before uikit.]]></page>
<page path="/migration/from-version-0" title="Migrating from 0.* to 1.*"><![CDATA[URL: https://pmndrs.github.io/uikit/migration/from-version-0
Description: How to migrate a from react-three/uikit 0.* to react-three/uikit 1.*


## Why this release
- More alignment with html/css
- `pmndrs/uikit` is now the stable core for vanilla three.js. `react-three/uikit` is a thin layer on top.
  - The core can be used across three.js-based frameworks (IWSDK, vanilla three.js, react-three/fiber).
  - Component and icon kits are available across vanilla and other frameworks.
- Simpler code for better maintainability.

## What’s new (Added)
- `zIndex` to control render order (like html/css).
- `display: contents` (Yoga 3.2).
- `white-space` to control whitespace in text, inputs, …
- Global classes via `StyleSheet`.
- `*` property to set default properties for all descendants.
- Input `placeholder` support.
- `important` to raise style precedence (works with `*`).
- support for modifying the position, scale, rotation directly on the outer most uikit component's removing the necessity to wrap every UI in a group to control its transformation in 3D space

## What changed
- Properties that inherit in html/css now inherit in uikit as well.
- `pixelSize` can be set anywhere and inherits to descendants.
- `textAlign: block` → `textAlign: justify`.
- `Image` can no longer have children. Wrap the image in a relatively positioned container; put children inside with `position: absolute` and a higher `zIndex`.
- `ref` is now a proper uikit three.js component with typings and full internal access.
- `setStyle` → `setProperties` (more robust and performant; can update all properties).
- `border`/`borderX`/… → `borderWidth`/`borderXWidth`/… (matches html/css).
- `lineHeight` without a unit is a multiplier; with `px` it’s absolute (matches html/css).
- `scrollbarBackgroundColor` → `scrollbarColor`.

## Deprecated (React)
- `Root`: use `Container` or remove if unnecessary.
- `DefaultProperties`: use `<Container display="contents" {...{ '*': defaultProps }}>` or write defaults using `'*'` on any component.
- `FontFamilyProvider`: provide `fontFamilies` on a `Container` with `display="contents"` or on existing components.
- `Icon` → `Svg`; property `text` → `content`.

## Removed
- `backgroundOpacity` and `borderOpacity`. Opacity is part of the color now (background/border), like html/css. Use `withOpacity` or the `useWithOpacity` React hook.
- `useRootSize`. Access the root via any element ref: `anyComponent.root.value.component.size.value`.
- `isInteractionPanel`. All uikit elements are interaction panels now.
- `apfel-kit` (low usage).

## Quick migration checklist
- Replace `Root` with `Container` (or remove if not necassary).
- Replace `DefaultProperties` with a `Container display="contents"` and `'*'` defaults.
- Move `FontFamilyProvider` to `fontFamilies` on a `Container` or any other component.
- Replace `Icon` with `Svg` and rename the `text` property → `content`.
- Rename `setStyle` → `setProperties`.
- Rename `border*` → `border*Width` variants.
- Update `textAlign: block` → `justify`.
- Remove `backgroundOpacity`/`borderOpacity`; use color with alpha or `withOpacity`/`useWithOpacity`.
- Remove `isInteractionPanel` usage
- Remove `useRootSize`; use refs to access root size.
- Ensure `Image` has no children; wrap with a relative container and place children absolutely with higher `zIndex`.]]></page>
<page path="/default-kit/accordion" title="Accordion"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/accordion
Description: How to use the Accordion component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  AccordionTriggerIcon,
} from '@react-three/uikit-default'

//TODO: type="single" collapsible
function AccordionDemo() {
  return (
    <Container flexDirection="column" width={300}>
      <Accordion>
        <AccordionItem value="item-1">
          <AccordionTrigger>
            <Text>Is it accessible?</Text>
            <AccordionTriggerIcon />
          </AccordionTrigger>
          <AccordionContent>
            <Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>
            <Text>Is it styled?</Text>
            <AccordionTriggerIcon />
          </AccordionTrigger>
          <AccordionContent>
            <Text>Yes. It comes with default styles that matches the other components&apos; aesthetic.</Text>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>
            <Text>Is it animated?</Text>
            <AccordionTriggerIcon />
          </AccordionTrigger>
          <AccordionContent>
            <Text>Yes. It&apos;s animated by default, but you can disable it if you prefer.</Text>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <AccordionDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Accordion } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/alert-dialog" title="Alert-dialog"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/alert-dialog
Description: How to use the Alert-dialog component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { signal } from '@preact/signals-core'
import { Text } from '@react-three/uikit'
import {
  Button,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  VanillaDialog,
} from '@react-three/uikit-default'
import { useMemo } from 'react'

function AlertDialogDemo() {
  const ref = useMemo(() => signal<VanillaDialog | undefined>(undefined), [])
  return (
    <>
      <AlertDialogTrigger dialog={ref}>
        <Button variant="outline">
          <Text>Show Dialog</Text>
        </Button>
      </AlertDialogTrigger>
      <AlertDialog ref={(dialog) => void (ref.value = dialog ?? undefined)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              <Text>Are you absolutely sure?</Text>
            </AlertDialogTitle>
            <AlertDialogDescription>
              <Text>
                This action cannot be undone. This will permanently delete your account and remove your data from our
                servers.
              </Text>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>
              <Text>Cancel</Text>
            </AlertDialogCancel>
            <AlertDialogAction>
              <Text>Continue</Text>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <AlertDialogDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Alert-dialog } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/alert" title="Alert"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/alert
Description: How to use the Alert component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text } from '@react-three/uikit'
import { Terminal } from '@react-three/uikit-lucide'
import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@react-three/uikit-default'

function AlertDemo() {
  return (
    <Alert maxWidth={500}>
      <AlertIcon>
        <Terminal width={16} height={16} />
      </AlertIcon>
      <AlertTitle>
        <Text>Error</Text>
      </AlertTitle>
      <AlertDescription>
        <Text>You can add components to your app using the cli.</Text>
      </AlertDescription>
    </Alert>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <AlertDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Alert } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/avatar" title="Avatar"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/avatar
Description: How to use the Avatar component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Container } from '@react-three/uikit'
import { Avatar } from '@react-three/uikit-default'

function AvatarDemo() {
  return (
    <Container alignItems="center">
      <Avatar src="https://picsum.photos/100/100" />
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <AvatarDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Avatar } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/badge" title="Badge"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/badge
Description: How to use the Badge component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text } from '@react-three/uikit'
import { Badge } from '@react-three/uikit-default'

function BadgeDemo() {
  return (
    <Badge>
      <Text>Badge</Text>
    </Badge>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <BadgeDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Badge } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/button" title="Button"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/button
Description: How to use the Button component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { ChevronRight } from '@react-three/uikit-lucide'
import { Button } from '@react-three/uikit-default'

function ButtonDemo() {
  return (
    <Button variant="outline" size="icon">
      <ChevronRight width={16} height={16} />
    </Button>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <ButtonDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Button } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/card" title="Card"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/card
Description: How to use the Card component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import { BellRing, Check } from '@react-three/uikit-lucide'
import {
  colors,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Switch,
} from '@react-three/uikit-default'

const notifications = [
  {
    title: 'Your call has been confirmed.',
    description: '1 hour ago',
  },
  {
    title: 'You have a new message!',
    description: '1 hour ago',
  },
  {
    title: 'Your subscription is expiring soon!',
    description: '2 hours ago',
  },
]

function CardDemo() {
  return (
    <Card width={380}>
      <CardHeader>
        <CardTitle>
          <Text>Notifications</Text>
        </CardTitle>
        <CardDescription>
          <Text>You have 3 unread messages.</Text>
        </CardDescription>
      </CardHeader>
      <CardContent flexDirection="column" gap={16}>
        <Container flexDirection="row" alignItems="center" gap={16} borderRadius={6} borderWidth={1} padding={16}>
          <BellRing />
          <Container flexDirection="column" gap={4}>
            <Text fontSize={14} lineHeight="100%">
              Push Notifications
            </Text>
            <Text fontSize={14} lineHeight="20px" color={colors.mutedForeground}>
              Send notifications to device.
            </Text>
          </Container>
          <Switch />
        </Container>
        <Container flexDirection="column">
          {notifications.map((notification, index) => (
            <Container
              key={index}
              marginBottom={index === notifications.length - 1 ? 0 : 16}
              paddingBottom={index === notifications.length - 1 ? 0 : 16}
              alignItems="flex-start"
              flexDirection="row"
              gap={17}
            >
              <Container height={8} width={8} transformTranslateY={4} borderRadius={1000} backgroundColor={0x0ea5e9} />
              <Container flexDirection="column" gap={4}>
                <Text fontSize={14} lineHeight="100%">
                  {notification.title}
                </Text>
                <Text fontSize={14} lineHeight="20px" color={colors.mutedForeground}>
                  {notification.description}
                </Text>
              </Container>
            </Container>
          ))}
        </Container>
      </CardContent>
      <CardFooter>
        <Button flexDirection="row" width="100%">
          <Check marginRight={8} height={16} width={16} />
          <Text>Mark all as read</Text>
        </Button>
      </CardFooter>
    </Card>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <CardDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Card } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/checkbox" title="Checkbox"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/checkbox
Description: How to use the Checkbox component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import { Label, Checkbox } from '@react-three/uikit-default'

function CheckboxDemo() {
  return (
    <Container flexDirection="row" gap={8} alignItems="center">
      <Checkbox />
      <Label>
        <Text>Accept terms and conditions</Text>
      </Label>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <CheckboxDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Checkbox } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/dialog" title="Dialog"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/dialog
Description: How to use the Dialog component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import {
  Button,
  Label,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  VanillaDialog,
} from '@react-three/uikit-default'
import { useMemo } from 'react'
import { signal } from '@preact/signals-core'

function DialogDemo() {
  const ref = useMemo(() => signal<VanillaDialog | undefined>(undefined), [])
  return (
    <>
      <DialogTrigger dialog={ref}>
        <Button variant="outline">
          <Text>Edit Profile</Text>
        </Button>
      </DialogTrigger>
      <Dialog ref={(dialog) => void (ref.value = dialog ?? undefined)}>
        <DialogContent sm={{ maxWidth: 425 }}>
          <DialogHeader>
            <DialogTitle>
              <Text>Edit profile</Text>
            </DialogTitle>
            <DialogDescription>
              <Text>Make changes to your profile here. Click save when you're done.</Text>
            </DialogDescription>
          </DialogHeader>
          <Container flexDirection="column" alignItems="center" gap={16} paddingY={16}>
            <Container alignItems="center" gap={16}>
              <Label>
                <Text textAlign="right">Name</Text>
              </Label>
              {/*<Input defaultValue="Pedro Duarte" className="col-span-3" />*/}
            </Container>
            <Container alignItems="center" gap={16}>
              <Label>
                <Text textAlign="right">Username</Text>
              </Label>
              {/*<Input id="username" defaultValue="@peduarte" className="col-span-3" />*/}
            </Container>
          </Container>
          <DialogFooter>
            <Button>
              <Text>Save changes</Text>
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <DialogDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Dialog } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/input" title="Input"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/input
Description: How to use the Input component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Container } from '@react-three/uikit'
import { Input } from '@react-three/uikit-default'

function InputDemo() {
  return <Input width={200} placeholder="Email" />
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <InputDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Input } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/label" title="Label"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/label
Description: How to use the Label component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import { Checkbox, Label } from '@react-three/uikit-default'

function LabelDemo() {
  return (
    <Container flexDirection="row" gap={8} alignItems="center">
      <Checkbox />
      <Label>
        <Text>Accept terms and conditions</Text>
      </Label>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <LabelDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Label } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/pagination" title="Pagination"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/pagination
Description: How to use the Pagination component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text } from '@react-three/uikit'
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@react-three/uikit-default'

function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>
            <Text>1</Text>
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>
            <Text>2</Text>
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>
            <Text>3</Text>
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <PaginationDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Pagination } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/progress" title="Progress"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/progress
Description: How to use the Progress component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { useEffect, useState } from 'react'
import { Progress } from '@react-three/uikit-default'

function ProgressDemo() {
  const [progress, setProgress] = useState(13)

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 1000)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} width={200} />
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <ProgressDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Progress } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/radio-group" title="Radio-group"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/radio-group
Description: How to use the Radio-group component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text } from '@react-three/uikit'
import { Label, RadioGroup, RadioGroupItem } from '@react-three/uikit-default'

function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <RadioGroupItem value="default">
        <Label>
          <Text>Default</Text>
        </Label>
      </RadioGroupItem>
      <RadioGroupItem value="comfortable">
        <Label>
          <Text>Comfortable</Text>
        </Label>
      </RadioGroupItem>
      <RadioGroupItem value="compact">
        <Label>
          <Text>Compact</Text>
        </Label>
      </RadioGroupItem>
    </RadioGroup>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <RadioGroupDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Radio-group } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/separator" title="Separator"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/separator
Description: How to use the Separator component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import { colors, Separator } from '@react-three/uikit-default'

function SeparatorDemo() {
  return (
    <Container width={300} flexDirection="column">
      <Container flexDirection="column" gap={4}>
        <Text fontSize={14} lineHeight="100%">
          Radix Primitives
        </Text>
        <Text fontSize={14} lineHeight="20px" color={colors.mutedForeground}>
          An open-source UI component library.
        </Text>
      </Container>
      <Separator marginY={16} />
      <Container
        flexDirection="row"
        height={20}
        alignItems="center"
        gap={16}
        {...{ '*': { fontSize: 14, lineHeight: '20px' } }}
      >
        <Text>Blog</Text>
        <Separator orientation="vertical" />
        <Text>Docs</Text>
        <Separator orientation="vertical" />
        <Text>Source</Text>
      </Container>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <SeparatorDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Separator } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/skeleton" title="Skeleton"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/skeleton
Description: How to use the Skeleton component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Container } from '@react-three/uikit'
import { Skeleton } from '@react-three/uikit-default'

function SkeletonDemo() {
  return (
    <Container flexDirection="row" alignItems="center" gap={16}>
      <Skeleton borderRadius={1000} height={48} width={48} />
      <Container flexDirection="column" gap={8}>
        <Skeleton height={16} width={250} />
        <Skeleton height={16} width={200} />
      </Container>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <SkeletonDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Skeleton } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/slider" title="Slider"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/slider
Description: How to use the Slider component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Slider } from '@react-three/uikit-default'

function SliderDemo() {
  return <Slider defaultValue={50} max={100} step={1} width={300} />
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <SliderDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Slider } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/switch" title="Switch"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/switch
Description: How to use the Switch component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import { Label, Switch } from '@react-three/uikit-default'

function SwitchDemo() {
  return (
    <Container flexDirection="row" alignItems="center" gap={8}>
      <Switch />
      <Label>
        <Text>Airplane Mode</Text>
      </Label>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <SwitchDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Switch } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/tabs" title="Tabs"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/tabs
Description: How to use the Tabs component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Label,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@react-three/uikit-default'

function TabsDemo() {
  return (
    <Tabs defaultValue="account" width={400}>
      <TabsList width="100%">
        <TabsTrigger flexGrow={1} value="account">
          <Text>Account</Text>
        </TabsTrigger>
        <TabsTrigger flexGrow={1} value="password">
          <Text>Password</Text>
        </TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>
              <Text>Account</Text>
            </CardTitle>
            <CardDescription>
              <Text>Make changes to your account here. Click save when you're done.</Text>
            </CardDescription>
          </CardHeader>
          <CardContent flexDirection="column" gap={8}>
            <Container flexDirection="column" gap={4}>
              <Label>
                <Text>Name</Text>
              </Label>
              <Text>Pedro Duarte</Text>
            </Container>
            <Container flexDirection="column" gap={4}>
              <Label>
                <Text>Username</Text>
              </Label>
              <Text>@peduarte</Text>
            </Container>
          </CardContent>
          <CardFooter>
            <Button>
              <Text>Save changes</Text>
            </Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>
              <Text>Password</Text>
            </CardTitle>
            <CardDescription>
              <Text>Change your password here. After saving, you'll be logged out.</Text>
            </CardDescription>
          </CardHeader>
          <CardContent flexDirection="column" gap={8}>
            <Container flexDirection="column" gap={4}>
              <Label>
                <Text>Current password</Text>
              </Label>
              <Text>password</Text>
            </Container>
            <Container flexDirection="column" gap={4}>
              <Label>
                <Text>New password</Text>
              </Label>
              <Text>password</Text>
            </Container>
          </CardContent>
          <CardFooter>
            <Button>
              <Text>Save password</Text>
            </Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <TabsDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Tabs } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/textarea" title="Textarea"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/textarea
Description: How to use the Textarea component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Textarea } from '@react-three/uikit-default'

function TextareDemo() {
  return <Textarea width={200} placeholder="Email" />
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <TextareDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Textarea } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/toggle-group" title="Toggle-group"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/toggle-group
Description: How to use the Toggle-group component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Bold, Italic, Underline } from '@react-three/uikit-lucide'
import { ToggleGroup, ToggleGroupItem } from '@react-three/uikit-default'

function ToggleGroupDemo() {
  return (
    <ToggleGroup>
      <ToggleGroupItem aria-label="Toggle bold">
        <Bold height={16} width={16} />
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle italic">
        <Italic height={16} width={16} />
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle underline">
        <Underline width={16} height={16} />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <ToggleGroupDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Toggle-group } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/toggle" title="Toggle"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/toggle
Description: How to use the Toggle component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Bold } from '@react-three/uikit-lucide'
import { Toggle } from '@react-three/uikit-default'

function ToggleDemo() {
  return (
    <Toggle>
      <Bold height={16} width={16} />
    </Toggle>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <ToggleDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Toggle } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/tooltip" title="Tooltip"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/tooltip
Description: How to use the Tooltip component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text } from '@react-three/uikit'
import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@react-three/uikit-default'

function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger>
        <Button variant="outline">
          <Text>Hover</Text>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <Text>Add to library</Text>
      </TooltipContent>
    </Tooltip>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <TooltipDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Tooltip } from "@react-three/uikit-default";
```]]></page>
<page path="/default-kit/video" title="Video"><![CDATA[URL: https://pmndrs.github.io/uikit/default-kit/video
Description: How to use the Video component from the Default kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-default': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Video } from '@react-three/uikit-default'

function VideoDemo() {
  return <Video crossOrigin="anonymous" src="./example.mp4" controls width={500} />
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        padding={32}
        backgroundColor={colors.background}
      >
        <VideoDemo />
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Video } from "@react-three/uikit-default";
```]]></page>
<page path="/horizon-kit/avatar" title="Avatar"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/avatar
Description: How to use the Avatar component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container } from '@react-three/uikit'
import { Avatar } from '@react-three/uikit-horizon'

function AvatarDemo() {
  return (
    <Container alignItems="center">
      <Avatar
        src="https://raw.githubusercontent.com/pmndrs/uikit/refs/heads/main/examples/horizon/public/avatar.png"
        size="lg"
        attributionActive
      />
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <AvatarDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Avatar } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/badge" title="Badge"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/badge
Description: How to use the Badge component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container } from '@react-three/uikit'
import { Badge } from '@react-three/uikit-horizon'

function BadgeDemo() {
  return (
    <Container alignItems="center">
      <Badge label="Badge" />
    </Container>
  )
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <BadgeDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Badge } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/button" title="Button"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/button
Description: How to use the Button component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Button, ButtonIcon, ButtonLabel, ButtonLabelSubtext } from '@react-three/uikit-horizon'
import { Text } from '@react-three/uikit'
import { GithubIcon } from '@react-three/uikit-lucide'

function ButtonDemo() {
  return (
    <Button>
      <ButtonIcon>
        <GithubIcon />
      </ButtonIcon>
      <ButtonLabel>
        <Text>Label</Text>
        <ButtonLabelSubtext>
          <Text>Subtext</Text>
        </ButtonLabelSubtext>
      </ButtonLabel>
    </Button>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <ButtonDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Button } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/checkbox" title="Checkbox"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/checkbox
Description: How to use the Checkbox component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container, Text } from '@react-three/uikit'
import { Checkbox } from '@react-three/uikit-horizon'

function CheckboxDemo() {
  return (
    <Container flexDirection="row" gap={8} alignItems="center">
      <Checkbox />
      <Text>Accept terms and conditions</Text>
    </Container>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <CheckboxDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Checkbox } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/divider" title="Divider"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/divider
Description: How to use the Divider component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container, Text } from '@react-three/uikit'
import { Divider } from '@react-three/uikit-horizon'

function DividerDemo() {
  return (
    <Container flexDirection="column" gap={16}>
      {/* Horizontal divider separating a title and content */}
      <Container width={360} flexDirection="column" gap={8}>
        <Text>Profile</Text>
        <Divider height={2} />
        <Text color="rgba(255,255,255,0.75)">Name, email and other details appear below.</Text>
      </Container>

      {/* Vertical dividers between cards */}
      <Container flexDirection="row" alignItems="center" gap={12} height={80}>
        <Container
          alignItems="center"
          justifyContent="center"
          width={120}
          height={60}
          backgroundColor="rgba(255,255,255,0.06)"
          borderRadius={8}
        >
          <Text>A</Text>
        </Container>
        <Divider orientation="vertical" width={2} />
        <Container
          alignItems="center"
          justifyContent="center"
          width={120}
          height={60}
          backgroundColor="rgba(255,255,255,0.06)"
          borderRadius={8}
        >
          <Text>B</Text>
        </Container>
        <Divider orientation="vertical" width={2} />
        <Container
          alignItems="center"
          justifyContent="center"
          width={120}
          height={60}
          backgroundColor="rgba(255,255,255,0.06)"
          borderRadius={8}
        >
          <Text>C</Text>
        </Container>
      </Container>
    </Container>
  )
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <DividerDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Divider } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/dropdown" title="Dropdown"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/dropdown
Description: How to use the Dropdown component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container, Text } from '@react-three/uikit'
import {
  Dropdown,
  DropdownAvatar,
  DropdownButton,
  DropdownIcon,
  DropdownList,
  DropdownListItem,
  DropdownTextValue,
} from '@react-three/uikit-horizon'

function DropdownDemo() {
  return (
    <Container gap={8}>
      <Dropdown>
        <DropdownAvatar src="./avatar.png" />
        <DropdownTextValue placeholder="Select option" />
        <DropdownIcon />
        <DropdownButton />
        <DropdownList>
          <DropdownListItem value="Option A">
            <Text>Option A</Text>
          </DropdownListItem>
          <DropdownListItem value="Option B">
            <Text>Option B</Text>
          </DropdownListItem>
          <DropdownListItem value="Option C">
            <Text>Option C</Text>
          </DropdownListItem>
        </DropdownList>
      </Dropdown>
    </Container>
  )
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <DropdownDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Dropdown } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/icon-indicator" title="Icon-indicator"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/icon-indicator
Description: How to use the Icon-indicator component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container } from '@react-three/uikit'
import { IconIndicator } from '@react-three/uikit-horizon'

function IconIndicatorDemo() {
  return (
    <Container flexDirection="row" gap={8}>
      <IconIndicator variant="none" />
      <IconIndicator variant="good" />
      <IconIndicator variant="poor" />
      <IconIndicator variant="bad" />
    </Container>
  )
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <IconIndicatorDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Icon-indicator } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/input-field" title="Input-field"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/input-field
Description: How to use the Input-field component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { InputField } from '@react-three/uikit-horizon'

function InputFieldDemo() {
  return <InputField width={280} label="HelperText" placeholder="Enter something" />
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <InputFieldDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Input-field } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/input" title="Input"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/input
Description: How to use the Input component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Input } from '@react-three/uikit-horizon'

function InputDemo() {
  return <Input width={240} placeholder="Email" variant="text" textAlign="left" />
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <InputDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Input } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/panel" title="Panel"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/panel
Description: How to use the Panel component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container, Text } from '@react-three/uikit'
import { Panel } from '@react-three/uikit-horizon'

function PanelDemo() {
  return (
    <Panel padding={16} width={300}>
      <Container>
        <Text>Panel content</Text>
      </Container>
    </Panel>
  )
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <PanelDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Panel } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/progress" title="Progress"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/progress
Description: How to use the Progress component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Container } from '@react-three/uikit'
import { ProgressBar, ProgressBarStepper, ProgressBarStepperStep } from '@react-three/uikit-horizon'

function ProgressDemo() {
  return (
    <Container gap={16} alignItems="center">
      <ProgressBar width={240} value={66} />
      <ProgressBarStepper width={300}>
        <ProgressBarStepperStep value />
        <ProgressBarStepperStep />
        <ProgressBarStepperStep />
        <ProgressBarStepperStep />
      </ProgressBarStepper>
    </Container>
  )
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <ProgressDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Progress } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/radio-group" title="Radio-group"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/radio-group
Description: How to use the Radio-group component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Text } from '@react-three/uikit'
import { RadioGroup, RadioGroupItem } from '@react-three/uikit-horizon'

function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <RadioGroupItem value="default">
        <Text>Default</Text>
      </RadioGroupItem>
      <RadioGroupItem value="comfortable">
        <Text>Comfortable</Text>
      </RadioGroupItem>
      <RadioGroupItem value="compact">
        <Text>Compact</Text>
      </RadioGroupItem>
    </RadioGroup>
  )
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <RadioGroupDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Radio-group } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/slider" title="Slider"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/slider
Description: How to use the Slider component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Slider } from '@react-three/uikit-horizon'

function SliderDemo() {
  return <Slider defaultValue={50} min={0} max={100} step={1} width={300} />
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <SliderDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Slider } from "@react-three/uikit-horizon";
```]]></page>
<page path="/horizon-kit/toggle" title="Toggle"><![CDATA[URL: https://pmndrs.github.io/uikit/horizon-kit/toggle
Description: How to use the Toggle component from the Horizon kit.


<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/uikit-horizon': '^1.0.44',
      '@react-three/uikit-lucide': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { Panel } from "@react-three/uikit-horizon";
import { Toggle } from '@react-three/uikit-horizon'

function ToggleDemo() {
  return <Toggle defaultChecked />
}



export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <ambientLight intensity={0.5} />
      <directionalLight intensity={1} position={[-5, 5, 10]} />
      <Fullscreen
        overflow="scroll"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
      >
        <Panel color="black" dark={{ color: "white" }} padding={32}>
          <ToggleDemo />
        </Panel>
      </Fullscreen>
    </Canvas>
  )
}`}}
/>

```bash
import { Toggle } from "@react-three/uikit-horizon";
```]]></page>