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
<Content>
    <Suspense>
        <Gltf src="...">
    </Suspense>
</Content>
```

</td>
<td>

```jsx
<Suspense>
    <Content>
        <Gltf src="...">
    </Content>
</Suspense>
```

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

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.

Asynchronous Objects inside Content

Pitfalls

uikit brings user interfaces to @react-three/fiber


![uikit banner](https://github.com/pmndrs/uikit/raw/main/docs/getting-started/./banner.jpg)

Build performant 3D user interfaces for **Three.js** using **@react-three/fiber** and **yoga** with support for nested scrolling, buttons, inputs, dropdowns, tabs, checkboxes, and more.

> 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?

| 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](https://github.com/pmndrs/uikit/raw/main/docs/getting-started/./basic-example.gif) |
| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |

```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={100} gap={100}>
      <Container flexGrow={1} backgroundOpacity={0.5} hover={{ backgroundOpacity: 1 }} backgroundColor="red" />
      <Container flexGrow={1} backgroundOpacity={0.5} hover={{ backgroundOpacity: 1 }} backgroundColor="blue" />
    </Fullscreen>
  </Canvas>,
)
```

## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired loaction with one command.
> For example, to add the button from the default kit, run: `npx uikit component add default Button`

| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>apfel</h3> _inspired by AVP_                            |
| --------------------------------------------------------------------- | ----------------------------------------------------------- |
| ![Overview over all default components](https://github.com/pmndrs/uikit/raw/main/docs/getting-started/./default-overview.jpg)                                                                      | ![Overview over all apfel components](https://github.com/pmndrs/uikit/raw/main/docs/getting-started/./apfel-overview.jpg) |
| [View All Components](../kits/default.md)                             | [View All Components](../kits/apfel.md)                     |
| `npx uikit component add default Button`                                  | `npx uikit component add apfel Button`                          |

## How to get started

> Some familiarity with
react, threejs, and @react-three/fiber, is recommended.

Get started with **[building your first layout](./first-layout.md)**, take a look at our **[examples](./examples.md)** to see uikit in action, or learn more about:

- [All components and their properties](./components-and-properties.md)
- [Interactivity](../tutorials/interactivity.md)
- [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](../kits/theming.md)

## Migration guides

- from [Koestlich](../migration/from-koestlich.md)
- from [HTML/CSS](../migration/from-html-css.md)
- from [Tailwind](../migration/from-tailwind.md)


What does it look like?

We provide multiple kits containing themable pre-styled components. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired loaction with one command.

Pre-styled component kits

How to get started

Migration guides

Introduction

First Layout

Examples

A list of all components and their properties.

All components in uikit use flexbox properties to define the position and size inside the layout. An overview of all available flexbox properties can be found below and here.

Flexbox Properties

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.

Container

Every layout needs to start with a Root component. The Root component has all the properties of a Container component. The pixelSize property of the Root component allows you to specify the relation of pixels inside the layout with the three.js units in the scene. The anchorX and anchorY properties allow you to specify where the Root component is anchored in relation to its position. The sizeX and sizeY properties can be used to give the layout a fixed size in three.js units. The Root component also allows to control the renderOrder and depthTest of the whole user interface.

Root

The Fullscreen component wraps the Root 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 Root 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.

Fullscreen

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.

Image

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.

SuspendingImage

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.

Portal

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 several properties aligned with the CSS text properties such as letterSpacing, lineHeight, fontSize, wordBreak, fontFamily, and fontWeight. In addition, the Text component has all the properties available in the Container component.

Text

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 multiline texts are allowed (similar to a textarea), whether the input is disabled, the current value, the defaultValue, an onValueChange listener, and the tabIndex to customize the tab order.

Input

The SVG component allows rendering an SVG file. The URL of the file is provided in the src property. Additionally, the opacity, color, and panelMaterialClass properties can be used to transform the appearance of the SVG, and all the Container properties are available for styling the background panel.

The SVGIconFromText component only differs from the SVG component in how the SVG content is provided. The SVGIconFromText component takes a text property, which must contain the source code of the SVG. This component helps to inline small SVG files in use cases such as icons. For example, this component is used to implement the uikit-lucide icon pack. When creating the component, the svgWidth and svgHeight properties must be provided since three.js currently doesn't respect the viewport defined in svg files.

SVGIconFromText

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}.

Content

The VideoContainer component allows to display a video based on the Image component. The component as all the properties of the Image component in addition to properties such as volume that allow controlling the video playback.

VideoContainer

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.

CustomContainer

The DefaultProperties component allows you to override the default properties for all children. HTML/CSS uses the concept of inheritance to change properties on all children. In uikit the DefaultProperties component can be used to achieve the same goal. In HTML/CSS, property inheritance is implicit; the DefaultProperties component allows explicit expression of what properties are inherited by its children.

DefaultProperties

The FontFamilyProvider component allows you to use the specified font families in all its children. The fonts must be compiled into an MSDF texture and a JSON containing glyph information, because uikit uses MSDF font rendering. More information on how to do this can be found here.

FontFamilyProvider

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:

Conditional Properties

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.

Preferred Color Schemes

All Components support all R3F event handlers. Additionally, event handlers for onSizeChange, onIsInViewportChange, and onScroll can be added to all components.

Event Properties

Each component exposes the ComponentInternals when using a ref. The component internals provide you with access to

Components and Properties

Build your first layout with 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 decoupled from react. Therefore features such providing defaults via context is not available. Furthermore, no event system is available out of the box. For interactivity, such as hover effects, developers have to attach their own event system by emitting pointer events to the UI elments:

```js
uiElement.dispatchEvent({ type: 'pointerOver', target: uiElement, nativeEvent: { pointerId: 1 } })
```

Aside from interacitivty and contexts, every feature is available.

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

The first step is to install the dependencies.

`npm i three @pmndrs/uikit`

Next, we create the `index.js` file and import the necessary dependencies and setup a threejs scene.

```js
import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
import { reversePainterSortStable, Container, Root } 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. Every layout must start with a `Root` element (or an element that wraps the `Root` element, such as the `Fullscreen` component). In this example, the `Root` is of size 2 by 1 (three.js units). The `Root` 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/).

```js
const root = new Root(camera, renderer, undefined, {
    flexDirection: "row",
    padding: 100,
    gap: 100
})
scene.add(root)

const defaultProperties = {
    backgroundOpacity: 0.5,
}

const container1 = new Container(
    root,
    {
        flexGrow: 1,
        hover: { backgroundOpacity: 1 }
        backgroundColor: "red"
    },
    defaultProperties
)
root.add(container1)

const container2 = new Container(
    root,
    {
        flexGrow: 1,
        backgroundOpacity: 0.5,
        hover: { backgroundOpacity: 1 },
        backgroundColor: "blue"
    },
    defaultProperties
)
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)`.

```js
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 (`npm i vite`), you can create a `index.html` file, add the following content, and run `npx vite`.

```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.jsx"></script>
  </head>
  <body style="margin: 0;">
    <div id="root" style="width: 100dvw; height: 100dvh;"></div>
  </body>
</html>
```

The result should look like this
![Screenshot of resulting project](https://github.com/pmndrs/uikit/raw/main/docs/getting-started/./first-layout.png)


The vanilla version of uikit (@pmndrs/uikit) is decoupled from react. Therefore features such providing defaults via context is not available. Furthermore, no event system is available out of the box. For interactivity, such as hover effects, developers have to attach their own event system by emitting pointer events to the UI elments:

Differences to @react-three/uikit

The first step is to install the dependencies.

Building a user interface with @pmndrs/uikit

Vanilla Three.js

Button

Card

Checkbox

List

Loading

Progress

Slider

Tab-bar

Tabs

Apfel

Accordion

Alert

Alert-dialog

Avatar

Badge

Dialog

Label

Pagination

Radio-group

Separator

Skeleton

Switch

Toggle

Toggle-group

Tooltip

Default

How to customize the theme of the components from the kits.

Theming

Interactivity

Responsive

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      |
| scrollbarBackgroundOpacity       | number              |
| scrollbarBackgroundColor         | ColorRepresentation |
| scrollbarWidth                   | number              |
| scrollbarBorderRadius            | number              |
| scrollbarBorderLeftRadius        | number              |
| scrollbarBorderRightRadius       | number              |
| scrollbarBorderTopRadius         | number              |
| scrollbarBorderBottomRadius      | number              |
| scrollbarBorderTopLeftRadius     | number              |
| scrollbarBorderTopRightRadius    | number              |
| scrollbarBorderBottomRightRadius | number              |
| scrollbarBorderBottomLeftRadius  | number              |


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.

onScroll

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.

Scrollbars

Scrolling

How to size elements and use pixelSize, sizeX, and sizeY.

Sizing

Custom Materials

How to build, set up, and use custom fonts.


The `Text` component enables rendering text using multi-channel signed distance functions (MSDF). By default, uikit provides the Inter font. A custom font can be converted from a `.ttf` file to an MSDF representation as a JSON and a corresponding texture using [msdf-bmfont-xml](https://www.npmjs.com/package/msdf-bmfont-xml).

## How to set up custom fonts?

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 artificats.

##### 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
 !\"#$%&'()*+,-./0123456789:;<=>?@ÄÖÜABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`äöüabcdefghijklmnopqrstuvwxyz{|}~ß§
```

> **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.

#### Implementing the generated font
Lastly, we add the font family via the `FontFamilyProvider`. 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  `FontFamilyProvider`.

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

```tsx
<FontFamilyProvider
  roboto={{
    medium: "url-to-medium.json",
    bold: "url-to-bold.json",
  }}
>
  <Text fontFamily="roboto">Test123</Text>
</FontFamilyProvider>
```


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

How to set up custom fonts?

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.

Generating the msdf font

Lastly, we add the font family via the FontFamilyProvider. 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  FontFamilyProvider.

Implementing the generated font

Custom Fonts

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.setStyle` or using a signal.

### using `ref.current.setStyle`

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

```jsx
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.setStyle({ opacity: Math.sin(clock.getElapsedTime()) / 2 + 0.5 })
    })
    return <Container ref={ref} backgroundOpacity={0}></Container>
}
```

Setting executing `setStyle(undefined)` 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 opacity on every frame without interfering with react.

```jsx
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 opacity = useMemo(() => signal(0), []);
    useFrame(({ clock }) => {
        //continuously animate between 0 and 1
        opacity.value = Math.sin(clock.getElapsedTime()) / 2 + 0.5
    })
    return <Container backgroundOpacity={opacity}></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.

When frequently changing properties of uikit components and especially when animating properties on every frame. We recommend modifying properties using ref.current.setStyle or using a signal.

Avoid React Re-renders

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

using ref.current.setStyle

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 opacity on every frame without interfering with react.

using signals

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 Custom MaterialClasses

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.

Avoid Many Font Families

Performance

How to migrate a user interface from koestlich to uikit.


This guide is intended for developers migrating their user interface from Koestlich to uikit. The migration involves several changes to properties and components to better align with uikit's design principles. Here's what you need to know:

## General Changes

- **Index Property Removal**: The index property is no longer needed. UI elements will always be in the correct order, regardless of when they are inserted into the UI.
- **Layout Animations Removal**: Layout animations have been removed, making the ID and animation properties unnecessary.
- **Cursor Support**: Like in CSS, the cursor property allows to specify the type of cursor shown when hovering
- **Conditional Properties**: The hover and dark properties allow to specify how properties that are only applied when the component is hovered or active or when dark mode is enabled. 
- **Simpler Responsiveness**: Properties that are only active based on the current screen size can be applied using the lg, md, and sm properties.
- **No Suspense needed**: Similar to react-dom, images, text, svgs, and icons don't suspense anymore. Therefore, uikit doesn't require setting suspense boundaries for their components.
- **Event propagation**: behaves correctly
- **Default Animations**: no default animations
- **Scroll Experience**: Support for scrollbar and support for overscroll rubberbanding.

## Property Renaming

- **Material Property**: The material property has been renamed to panelMaterialClass.
- **Line Height**: The lineHeightMultiplier property has been renamed to lineHeight to better align with CSS naming conventions.
- **Word Break**: The wrapper property was renamed to wordBreak to better align with CSS naming conventions.

## Component Changes

- **Object to Content Component**: The Object component is replaced with the Content component. The depth property has been removed. The Content component now allows any R3F (React Three Fiber) component to be placed inside. To mimic the behavior of the Object component, use
    ```jsx
    <Content>
        <primitive object={'...'}>
    </Content>
    ```
- **SVG Depth Removal**: The SVG component no longer has a depth property, as SVGs are considered 2D planes.
- **Box Component Removal**: The Box component has been removed.
- **DefaultStyleProvider**: DefaultStyleProvider is renamed to DefaultProperties

## Font Families

- Font families are now provided as
    ```jsx
    <FontFamilies roboto={{ normal: "{url}", bold: "{url}" }}>
    ```
    instead of
    ```jsx
    <FontFamilies robotoNormal="url" robotoBold="bold">
    ```
    When using font families, utilize them as
    ```jsx
    <Text fontFamily="roboto" fontWeight="bold">
    ```
    instead of
    ```jsx
    <Text fontFamily="robotoBold">
    ```


## Defaults

The defaults of the yoga layout engine have changed to match the web defaults. Therefore, some properties turn unnecassary while others need to be added.

- **flexDirection** defaults to `row` instead of `column`
- **alignContent** defaults to `stretch` instead of `flex-start`
- **flexShrink** defaults to `1` instead of `0`

In most cases explicitly specifying the flexDirection is enough.

## Migration Steps

- Remove the index property from your UI elements. The order will be automatically managed.
- Remove any ID and animation properties related to layout animations.
- Update the material property to panelMaterialClass as applicable.
- Replace Object components with Content components. Use
    ```jsx
    <Content>
        <primitive object=\{...}>
    <Content>
    ```
    to replicate the previous Object component's behavior.
- Modify your font family declarations to the new format and adjust how you specify font weights in text components.
- Rename lineHeightMultiplier to lineHeight and wrapper to wordBreak in your code to align with CSS naming.
- Rname DefaultStyleProvider to DefaultProperties
- Remove the depth property from all SVG components
- Replace usages of the Box component with a Content component containing an Object3D with a BoxGeomtry.
- Adapt the components to use to the new defaults, which most likely means explicitly setting `flexDirection` to `row` and `flexShrink` to `0`.

By following these steps, you should be able to smoothly transition your user interface from Koestlich to uikit, taking advantage of the latter's streamlined properties and components.

General Changes

Property Renaming

Component Changes

Font Families

The defaults of the yoga layout engine have changed to match the web defaults. Therefore, some properties turn unnecassary while others need to be added.

Defaults

Migration Steps

Migration from Koestlich

How to migrate a user interface from tailwind to uikit.


uikit is inspired by tailwind. Therefore, many properties are similar with minor syntactical difference. The major differences are **sizing** and **defaults**.

## Sizing

In contrast to tailwind, uikit's core units are pixels. Therefore, sizes such as `p-3`, which translates to `padding: 0.75rem` or `padding: 16px` would be expressed as `padding={16}` in uikit. The rule for sizes is to multiply the tailwind value times 4.

Other sizes such as border radii (e.g. `rounded-md`) must be converted by looking into the [Tailwind Documentation](https://tailwindcss.com/docs). In this case `rounded-md` translates to `borderRadius={6}`.


In contrast to tailwind, uikit's core units are pixels. Therefore, sizes such as p-3, which translates to padding: 0.75rem or padding: 16px would be expressed as padding={16} in uikit. The rule for sizes is to multiply the tailwind value times 4.

Migration from Tailwind

How to migrate a user interface from HTML/CSS to uikit.


uikit is inspired by HTML/CSS. Therefore, many properties are similar with minor syntactical difference.

## No more CSS files

In uikit classes can be defined directly in the file. Styles should not be seperated from their usage.
The use of inline styles is recommended and supported through the typescript type system.


In uikit classes can be defined directly in the file. Styles should not be seperated from their usage.
The use of inline styles is recommended and supported through the typescript type system.

❌ incorrect	✅ correct
`<Content> <Suspense> <Gltf src="..."> </Suspense> </Content>`	`<Suspense> <Content> <Gltf src="..."> </Content> </Suspense>`