# @pmndrs/uikit-horizon

> Horizon kit for @pmndrs/uikit based on the Reality Labs Design System (RLDS)

Latest version **1.0.76** (published 2026-09-01) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @pmndrs/uikit-horizon
pnpm add @pmndrs/uikit-horizon
yarn add @pmndrs/uikit-horizon
bun add @pmndrs/uikit-horizon
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.76 |
| Published | 2026-09-01 |
| First published | 2025-09-14 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3240 |
| Author | Bela Bohlender |
| Maintainers | abernier, pmndrs01, drcmda, bjornstar, dennissmolek, bela-bohlender, isaacmason, krispyaa |
| Keywords | uikit, horizon, rlds, three.js, userinterface, flexbox, yoga, typescript |

## Links

- npm: https://www.npmjs.com/package/@pmndrs/uikit-horizon
- Repository: https://github.com/pmndrs/uikit
- Issues: https://github.com/pmndrs/uikit/issues
- npm.io page: https://npm.io/package/@pmndrs/uikit-horizon

## Dependencies (3)

- [zod](https://npm.io/package/zod.md) ^4.4.3
- [@pmndrs/uikit](https://npm.io/package/@pmndrs/uikit.md) ^1.0.76
- [@pmndrs/uikit-lucide](https://npm.io/package/@pmndrs/uikit-lucide.md) ^1.0.76

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.76 (latest) — 2026-09-01
- 1.0.45 (alpha) — 2025-10-16
- 1.0.75 — 2026-08-03
- 1.0.74 — 2026-06-18
- 1.0.73 — 2026-05-27
- 1.0.72 — 2026-05-16
- 1.0.71 — 2026-05-15
- 1.0.70 — 2026-05-15
- 1.0.69 — 2026-05-14
- 1.0.68 — 2026-05-12
- 1.0.67 — 2026-05-05
- 1.0.66 — 2026-05-05
- 1.0.64 — 2026-03-10
- 1.0.63 — 2026-03-07
- 1.0.62 — 2026-02-10
- … 28 more at https://npm.io/package/@pmndrs/uikit-horizon/versions

## README

<p align="center">
  <img src="./docs/getting-started/logo.svg" width="100" />
</p>

<h1 align="center">uikit</h1>
<h3 align="center">Build performant 3D user interfaces for threejs.</h3>
<br/>

<p align="center">
  <a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
    <img src="https://img.shields.io/npm/v/@react-three/uikit?style=flat&colorA=000000&colorB=000000" alt="NPM" />
  </a>
  <a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
    <img src="https://img.shields.io/npm/dt/@react-three/uikit.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
  </a>
  <a href="https://twitter.com/pmndrs" target="_blank">
    <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" />
  </a>
  <a href="https://discord.gg/ZZjjNvJ" target="_blank">
    <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" />
  </a>
</p>

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

### What does it look like?

| A simple UI with 2 containers horizontally aligned, rendered in fullscreen. When the user hovers over a container, the container's opacity changes. | ![render of the above code](./docs/getting-started/basic-example.gif) |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |

Source code when using `@react-three/uikit`:

```jsx
import { createRoot } from 'react-dom/client'
import React from 'react'
import { Canvas } from '@react-three/fiber'
import { Fullscreen, Container } from '@react-three/uikit'

createRoot(document.getElementById('root')).render(
  <Canvas>
    <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](https://docs.pmnd.rs/uikit/getting-started/first-layout)**, take a look at our **[examples](https://docs.pmnd.rs/uikit/getting-started/examples)** to see uikit in action. If you want to use vanilla three.js, visit [this tutorial](https://pmndrs.github.io/uikit/docs/getting-started/vanilla). Alternatively, learn more about:

- [All components and their properties](https://docs.pmnd.rs/uikit/getting-started/components-and-properties)
- [Interactivity](https://docs.pmnd.rs/uikit/tutorials/interactivity)
- [Custom materials](https://docs.pmnd.rs/uikit/tutorials/custom-materials)
- [Custom fonts](https://docs.pmnd.rs/uikit/tutorials/custom-fonts)
- [Responsive user interfaces](https://docs.pmnd.rs/uikit/tutorials/responsive)
- [Scrolling](https://docs.pmnd.rs/uikit/tutorials/scroll)
- [Sizing](https://docs.pmnd.rs/uikit/tutorials/sizing)
- [Common pitfalls](https://docs.pmnd.rs/uikit/advanced/pitfalls)
- [Optimize performance](https://docs.pmnd.rs/uikit/advanced/performance)
- [Theming components](https://docs.pmnd.rs/uikit/advanced/theming)

## Pre-styled component kits

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

| <h3>default</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](./docs/getting-started/default-overview.jpg) | ![Overview over all horizon components](./docs/getting-started/horizon-overview.png)                                          |
| [View All Components](https://docs.pmnd.rs/uikit/default-kit/accordion)              | [View All Components](https://docs.pmnd.rs/uikit/horizon-kit/avatar)                                                          |
| 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.\*](https://pmndrs.github.io/uikit/docs/migration/from-version-0)

## 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)

---
_Source: https://npm.io/package/@pmndrs/uikit-horizon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._