# uikit

## Documentation

- [Introduction](/getting-started/introduction): Build performant 3D user interfaces for threejs using R3F and yoga.
- [First Layout](/getting-started/first-layout): Build your first layout with uikit.
- [Examples](/getting-started/examples): Examples made with uikit.
- [Components and Properties](/getting-started/components-and-properties): A list of all components and their properties.
- [Globals](/getting-started/globals): Global APIs to control defaults, classes, and color scheme.
- [Vanilla Three.js](/getting-started/vanilla): Build your first layout with uikit and vanilla threejs.
- [Interactivity](/tutorials/interactivity): How to make the UI elements interactive.
- [Responsive](/tutorials/responsive): How to make the ui elements responsive.
- [Scrolling](/tutorials/scroll): How to use overflow, scrolling, and clipping.
- [Sizing](/tutorials/sizing): How to size elements and use pixelSize, sizeX, and sizeY.
- [Custom Materials](/tutorials/custom-materials): How to use custom materials in uikit.
- [Custom Fonts](/tutorials/custom-fonts): How to build, set up, and use custom fonts.
- [Pitfalls](/advanced/pitfalls): Pitfalls to avoid when building userinterfaces with uikit
- [Performance](/advanced/performance): Important considerations for building performant user interfaces with uikit.
- [Types](/advanced/types): How to configure the types to align with the event system you are using.
- [Migrating from 0.* to 1.*](/migration/from-version-0): How to migrate a from react-three/uikit 0.* to react-three/uikit 1.*
- [Accordion](/default-kit/accordion): How to use the Accordion component from the Default kit.
- [Alert-dialog](/default-kit/alert-dialog): How to use the Alert-dialog component from the Default kit.
- [Alert](/default-kit/alert): How to use the Alert component from the Default kit.
- [Avatar](/default-kit/avatar): How to use the Avatar component from the Default kit.
- [Badge](/default-kit/badge): How to use the Badge component from the Default kit.
- [Button](/default-kit/button): How to use the Button component from the Default kit.
- [Card](/default-kit/card): How to use the Card component from the Default kit.
- [Checkbox](/default-kit/checkbox): How to use the Checkbox component from the Default kit.
- [Dialog](/default-kit/dialog): How to use the Dialog component from the Default kit.
- [Input](/default-kit/input): How to use the Input component from the Default kit.
- [Label](/default-kit/label): How to use the Label component from the Default kit.
- [Pagination](/default-kit/pagination): How to use the Pagination component from the Default kit.
- [Progress](/default-kit/progress): How to use the Progress component from the Default kit.
- [Radio-group](/default-kit/radio-group): How to use the Radio-group component from the Default kit.
- [Separator](/default-kit/separator): How to use the Separator component from the Default kit.
- [Skeleton](/default-kit/skeleton): How to use the Skeleton component from the Default kit.
- [Slider](/default-kit/slider): How to use the Slider component from the Default kit.
- [Switch](/default-kit/switch): How to use the Switch component from the Default kit.
- [Tabs](/default-kit/tabs): How to use the Tabs component from the Default kit.
- [Textarea](/default-kit/textarea): How to use the Textarea component from the Default kit.
- [Toggle-group](/default-kit/toggle-group): How to use the Toggle-group component from the Default kit.
- [Toggle](/default-kit/toggle): How to use the Toggle component from the Default kit.
- [Tooltip](/default-kit/tooltip): How to use the Tooltip component from the Default kit.
- [Video](/default-kit/video): How to use the Video component from the Default kit.
- [Avatar](/horizon-kit/avatar): How to use the Avatar component from the Horizon kit.
- [Badge](/horizon-kit/badge): How to use the Badge component from the Horizon kit.
- [Button](/horizon-kit/button): How to use the Button component from the Horizon kit.
- [Checkbox](/horizon-kit/checkbox): How to use the Checkbox component from the Horizon kit.
- [Divider](/horizon-kit/divider): How to use the Divider component from the Horizon kit.
- [Dropdown](/horizon-kit/dropdown): How to use the Dropdown component from the Horizon kit.
- [Icon-indicator](/horizon-kit/icon-indicator): How to use the Icon-indicator component from the Horizon kit.
- [Input-field](/horizon-kit/input-field): How to use the Input-field component from the Horizon kit.
- [Input](/horizon-kit/input): How to use the Input component from the Horizon kit.
- [Panel](/horizon-kit/panel): How to use the Panel component from the Horizon kit.
- [Progress](/horizon-kit/progress): How to use the Progress component from the Horizon kit.
- [Radio-group](/horizon-kit/radio-group): How to use the Radio-group component from the Horizon kit.
- [Slider](/horizon-kit/slider): How to use the Slider component from the Horizon kit.
- [Toggle](/horizon-kit/toggle): How to use the Toggle component from the Horizon kit.

## MCP Server

This documentation is available via Model Context Protocol (MCP) server at https://docs.pmnd.rs/api/mcp

Configure in your MCP client:
```json
{
  "mcpServers": {
    "pmndrs": {
      "type": "http",
      "url": "https://docs.pmnd.rs/api/mcp"
    }
  }
}
```

---

For full documentation content, see llms-full.txt