pmndrs/uikit

🎨 user interfaces for react-three-fiber

uikit

Build performant 3D user interfaces for
threejs using R3F and yoga.

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

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.

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

How to get started

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

Get started with building your first layout, take a look at our examples to see uikit in action, or learn more about:

• All components and their properties
• Interactivity
• Custom materials
• Custom fonts
• Responsive user interfaces
• Scrolling
• Sizing
• Common pitfalls
• Optimize performance
• Theming components

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 location with one command.

For example, to add the button from the default kit, run: npx uikit component add default Button

default based on Shadcn	apfel inspired by AVP
View All Components	View All Components
npx uikit component add default Button	npx uikit component add apfel Button

Migration guides

• from Koestlich
• from HTML/CSS
• from Tailwind

Sponsors

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

uikit's Issues

'Root' cannot be used as a JSX component.

Trying to take this superb addition to pmndrs toolkit for a spin but getting a very curious error...

TS2786: 'Root' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.
    58 |
    59 |     return(
  > 60 |         <Root>
       |          ^^^^
    61 |             <Container flexGrow={1} margin={48} backgroundColor="green" />
    62 |             <Container flexGrow={1} margin={48} backgroundColor="blue" />
    63 |         </Root>

is this a limitation / bug or would this be that the <Root> component is being used in the wrong way?

Line Clamp / Text overflow

https://tailwindcss.com/docs/line-clamp

Z-Index issue

Please see the repro: https://stackblitz.com/edit/vitejs-vite-jvlwa4?file=src%2Fmain.tsx
Expected result: text "Demo" has grey background
Actual result: the text background is under the image

Ofc setting zIndexOffset helps, but is there any way to avoid it?

onFocusChange is not called

The onFocusChange callback in the input is not being called.
Here is a runnable example where I construct a basic Input component that changes the border color upon focusing on it. I attached a console log to the onHoverChange, which works, but onFocusChange doesn't result in logs.

        <Input
          borderWidth={2}
          focus={{ borderColor: 'orange' }}
          onFocusChange={(focused) => console.log('focus: ', focused)}
          onHoverChange={(hovered) => console.log('hover: ', hovered)}
          borderColor="black"
          value={text}
          onValueChange={setText}
          minWidth={100}
        />

Bug: onFocusChange of Input is never called

positioning should not be applied when static

I'm not certain about this. but positionLeft, positionRight, positionTop, and positionBottom probably shouldn't be applied if the positionType is static, otherwise they're kinda like padding right?

Retained mode UI example

This may sound stupid but I want alternative to immediate mode UI, because I suppose it will be faster for my case. Is it possible to render UI in texture?

TypeScript: Missing `children` on ContainerProperties, and other issues.

When installing components from the default kit, the installed components are importing the ContainerProperties type from @react-three/uikit as props, but that type is missing children.

This is leading to TypeScript errors.

I notice that Container itself manually adds the children prop via:

props: { children?: ReactNode } & ContainerProperties & ...etc

However in components like accordion.tsx, no such children prop is added to the prop types.

Also getting errors on other style properties, like bottomBorderWidth.

Versions:

"@react-three/fiber": "^8.16.2",
"@react-three/uikit": "^0.2.9",
"react": "^18",

Are the generated files depending on an unreleased version of uikit, or perhaps the generated files are out of date?

expose control over the three.js side property to render the back side of elements

dark.ts file seems to have an incorrect type declaration (at line 54)

When deploying an app with a UiKit component, it fails with this error -

./node_modules/@react-three/uikit/dist/dark.d.ts:13:53
Type error: Type parameter declaration expected.

  11 | export declare function getPreferredColorScheme(): PreferredColorScheme;
  12 | export declare function useApplyPreferredColorSchemeProperties(collection: ManagerCollection, properties: WithClasses<WithPreferredColorScheme<Properties>> & EventHandlers): void;
> 13 | export declare function basedOnPreferredColorScheme<const T extends {
     |                                                     ^
  14 |     [Key in string]: ColorRepresentation;
  15 | }>({ dark, light, }: {
  16 |     dark: T;
Error: Process completed with exit code 1.

Cannot install components via CLI

Running npx uikit component add apfel button currently prints an error:

Unable to fetch registry for apfel kit: Unexpected token : in JSON at position 3

(This was working a few hours ago)

After some troubleshooting, I can see that the CLI is requesting:

https://raw.githubusercontent.com/pmndrs/uikit/main/packages/kits/apfel/registry.json, which is a 404.

The URL is missing the src directory. This works:

https://raw.githubusercontent.com/pmndrs/uikit/main/packages/kits/apfel/src/registry.json

percentage support for transform properties

centering absolute divs via transform: translate(-50%, -50%); is common

Default background of image should be transparent

Currently it looks like images have a white background before they load. I worked around this by using suspense, but ideally images would have a transparent background to avoid flashing.

can't start project

pnpm dev

@ dev /Users/ismoiljonabdukakhkhorov/Desktop/uikit/examples/dashboard
vite --host

VITE v5.0.12 ready in 135 ms

➜ Local: https://localhost:5173/
➜ Network: https://10.20.6.26:5173/
➜ press h + enter to show help
✘ [ERROR] Could not resolve "./wasm.js"

../../packages/uikit/src/flex/load-base64.ts:2:23:
  2 │ import { base64 } from './wasm.js'
    ╵                        ~~~~~~~~~~~

✘ [ERROR] Could not resolve "./setter.js"

../../packages/uikit/src/flex/node.ts:14:23:
  14 │ import { setter } from './setter.js'
     ╵                        ~~~~~~~~~~~~~

Icon component typings and docs are obsolete

The component "Icon" is called "SVGIconFromText" in documentation, I guess it's something from past.
Also, IconProperties don't contain "color" property, but the component seems to be working fine with it.
Is there something I don't see? If not, I will prepare PR with some fixes soon.

Onscreen keyboard doesn’t open on iOS Chrome/Safari

This sample page:
https://pmndrs.github.io/uikit/examples/auth/

is, I believe, supposed to open an on-screen keyboard when clicking the text field.

That currently does not work on iOS (both chrome and safari have the issue). I haven’t tested yet but assume it would also be broken on visionOS (XR and non-XR).

expose ref.current.getStyle and add default for ComponentInternals

Remove Root

"Root" nobody likes you :(

Add scroll delta multiplier

As of now, the amount scrolled is only dependant of the pixelSize of the Root, but it would be nice to have a property to modify this amount.

Example usage

<Root pixelSize={0.002}>
  <Container overflow="scroll" scrollMultiplier={10}>
    {/* Content */}
  </Container>
</Root>

would equal

<Root pixelSize={0.02}>
  <Container overflow="scroll">
    {/* Content */}
  </Container>
</Root>

Fix importing from `./theme.js` to be from `./theme` in generated code

Hi
I tried uikit and run the command

npx uikit component add apfel card

The generated file includes a reference to theme.js, which does not exist since the code generates theme.tsx. It would be better to remove the .js suffixes from the utils and import them from ./theme, ensuring that the user doesn't need to make any adjustments to integrate it.

uikit/packages/kits/default/src/card.tsx

Line 3 in 465c14a

import { borderRadius, colors } from './theme.js'

https://github.com/search?q=repo:pmndrs/uikit%20from%20%22./theme.js%22&type=code

expo web

Hi,

Running expo install react-native-web in my fork's expo-yarn branch and yarn start followed by the w key, correctly starts the browser and seems quite close to a functional uikit for web output, except for these details:

• some white space at the top
• buttons can't be clicked (unless moving the mouse while holding click)
• scrolling with the wheel or swiping on a touchpad doesn't work

UPDATE: comparing more closely to the original example I think that the cursor doesn't change to the hover icon on buttons either.

Relative paths on font family provider

Right now font family provider seems to only work with absolute paths. I think it's more convenient to have relative paths for many reasons (react relative paths builds, etc).

Suggestion to be loaded on react public folder:

<FontFamilyProvider roboto={{ medium: "./fonts/GilroySemiBold-msdf/GilroySemiBold-msdf.json", bold: "./fonts/PolySansBulkyWide-msdf/PolySansBulkyWide-msdf.json", }} > ... </FontFamilyProvider>

Can't build

After

pnpm install
pnpm -r inline-wasm pnpm -r convert
pnpm -r generate
pnpm -r build

I get the following error:

Scope: 8 of 9 workspace projects
packages/uikit build$ tsc
│ src/components/input.tsx(102,5): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(103,18): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(114,27): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(125,23): error TS2304: Cannot find name 'getCursorPosition'.
│ src/components/input.tsx(128,25): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(141,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(142,11): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(148,23): error TS2304: Cannot find name 'getCursorPosition'.
│ src/components/input.tsx(149,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(150,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(151,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(152,11): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(158,24): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(163,25): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(181,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(182,11): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(224,9): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
└─ Failed in 1.4s at /Users/kacperserewis/Documents/dev/uikit/packages/uikit
/Users/kacperserewis/Documents/dev/uikit/packages/uikit:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @react-three/[email protected] build: `tsc`
Exit status 2

No way to load font when hashing filename

I'm using vite to build the application, and it's adding file hashes to filenames for cache busting. It's very common to do it for fonts, but I'm doing it anyway to always make sure I can update fonts asap.
It is impossible now to use fonts, because font png url is taken from font json definition.
I've already fixed it locally and would like to make a PR with changes.

Yoga fails in StrictMode when manually rendering canvas

Hello!
Firstly, thank you for your work on this library. We've been watching for its development and we want to integrate it to our project in future.
But we encountered some bug that we don't know how to fix.
This issue appears when using react's StrictMode and rendering the root without canvas. Please see the attached repro:
https://stackblitz.com/edit/vitejs-vite-wfq5n8?file=src%2Fmain.tsx

Xr controller as input

Is this possible yet? It looks like I would have to get the input from my xr controllers (quest3) and somehow feed them intro react fibre's event system to have buttons etc interact with my controller.

fontSize percentage

Would be nice if the Text component accepted a fontSize with a number and percentage instead of just a number

Something like:

Native?

Hi there,

in his tweet @drcmda mentioned that uikit will run in native. Would you mind expanding on this? How would it work and on which platforms?

Cheers,

Jun

Strange flashing when remounting images

See repro here:
https://stackblitz.com/edit/vitejs-vite-eafhmw?file=src%2Fmain.tsx

And the recording:
https://github.com/pmndrs/uikit/assets/9379701/81269900-f3d8-433c-92d5-a8828a915bf6

To reproduce, you should load you system (I've opened a bunch of tabs and enabled 6x CPU throttling).
Then click on the red square on the top left.

The page flashes I guess when mounting images (if I remove Icon component, there's no flash).
I guess the plane is spawn at zero coordinates and then it moves.

I can try to fix it if you know what the problem is:)

accept HTMLVideoElement as src for the Video component

scrollIntoView

unable to run examples locally

Currently I am on the current main (1e2b12b) and ran pnpm iin the workspace root

This gives me several warnings:

 pnpm i
Scope: all 14 workspace projects
Lockfile is up to date, resolution step is skipped
Already up to date
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/apfel/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/auth/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/dashboard/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/lucide/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/card/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  17 other warnings
Done in 609ms

When I then try to run any example I get the following error:

❯ cd examples/apfel
❯ pnpm i
Scope: all 14 workspace projects
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/apfel/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/auth/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/card/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/default/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/dashboard/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  17 other warnings
Done in 608ms
❯ pnpm dev

> @ dev /Users/User/code/sandbox/uikit/examples/apfel
> vite --host

error when starting dev server:
Error: Failed to resolve entry for package "@react-three/uikit-lucide". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:29443:17)
    at resolvePackageEntry (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:29440:5)
    at tryNodeResolve (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:29210:20)
    at Context.resolveId (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:28978:28)
    at Object.resolveId (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63987:64)
    at async file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68003:21
    at async file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64644:20
    at async addManuallyIncludedOptimizeDeps (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:65837:31)
    at async createDepsOptimizer (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64885:9)
    at async initDepsOptimizer (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64785:9)
 ELIFECYCLE  Command failed with exit code 1.

My System:
I am on a M2 Max, Sonoma 14.3, pnpm 8.15.4, node v20.7.0

The input padding is incorrect

No matter what the values in the input padding are set to, the text stays centered in the box.
Here is a runnable example where we compare an Input component to a Container with a Text component. The text in the container seems to be correctly placed at the flex start with different paddings while the input component seems to either always center the text, even with textAlign and verticalAlign, or use the paddings in a way I wouldn't expect it to.

      <Root gap={20}>
        <Input
          borderWidth={2}
          borderRadius={6}
          paddingTop={2}
          paddingBottom={30}
          paddingLeft={10}
          paddingRight={30}
          textAlign="left"
          verticalAlign="top"
          focus={{ borderColor: 'orange' }}
          borderColor="black"
          value={text}
          onValueChange={setText}
        />
        <Container
          borderWidth={2}
          borderRadius={6}
          borderColor="gray"
          paddingTop={2}
          paddingBottom={30}
          paddingLeft={10}
          paddingRight={30}
        >
          <Text> Text Container </Text>
        </Container>
      </Root>
``

[Docs] "Vanilla Three.js" tab disappears when other tabs selected

Description

On the uikit docs website, the "Vanilla Three.js" tab inside of the "GETTING STARTED" category disappears when selecting a few other tabs. The tabs that seem to effect the "Vanilla Three.js" tab are "Components and Properties" within the "GETTING STARTED" category, and the "Apfel" and "Default" tabs in the "KITS" category. All other tabs show the "Vanilla Three.js" tab as expected.

Steps to recreate

• Navigate to https://docs.pmnd.rs/uikit/getting-started/introduction
• Click "First Layout" tab
• This will show the "Vanilla Three.js" tab at the bottom of the "GETTING STARTED" category
• Now select "Components and Properties"
• The "Vanilla Three.js" tab will disappear
• Repeat with "Apfel" and "Default", as those hide the "Vanilla Three.js" tab as well

Screenshots

Expected

Actual

Spaces don't affect the Input flex box

An Input component does only flex when characters are typed but not with trailing spaces. Here is an example.

When focussing on the input and moving the curser beyond the Oh Oh., we can see that it leaves the border. Try adding more spaces and you will see the cursor wanders off to a journey far far beyond it's borders :)

        <Input
          borderWidth={2}
          borderRadius={6}
          textAlign="left"
          verticalAlign="top"
          focus={{ borderColor: 'orange' }}
          borderColor="black"
          value={text}
          defaultValue="Oh Oh.   "
          onValueChange={setText}
          minWidth={20}
        />

Vanilla threejs support?

Hi, this looks amazing.

Can the library also be used with vanilla threejs as well?

Yoga dep error when running in expo-web/react-native-web

Hi, I have a repository here: https://github.com/Seanmclem/r3f-uikit-ts-expo

Where I have set up a basic Expo/RN app with web. I tested a basic html hello world, then dropped in the demo from the docs intro. Which works fine in a Vite/web repo I also made.

When running the web app via npm run web I get this on the terminal.

Unable to resolve "yoga-layout/wasm-async" from "node_modules/@react-three/uikit/dist/text/react.js"

And after installing expo-gl, and running npm run ios, I also get the exact same error.

What can I do? Or is there something you can do on your end?

Thanks for reading.

--Sean

caret doesn't show until with focus()

inputRef.current.focus()

although it works (I can type right away) the caret doesn't show until I type or click the input again

double click to select word in input

hitbox for close X in modal is tiny

Hi there,

I'm attaching a video showing that in the dashboard example after opening the "Edit Profile" link at the top right, when I move the cursor on the close X icon at the top right of the modal, it's quite difficult to hit the right spot

Screen.Recording.2024-03-16.at.19.27.23.mov

can't run pnpm dev

node version:16.20.2
pnpm version:8.15.4

`

@ dev /Users/zhangshaohong/test/uikit/examples/dashboard
vite --host

error when starting dev server:
Error: fetch is not set. Please pass a fetch implementation as new Octokit({ request: { fetch }}). Learn more at https://github.com/octokit/octokit.js/#fetch-missing
at fetchWrapper (/Users/zhangshaohong/test/uikit/node_modules/.pnpm/@octokit[email protected]/node_modules/@octokit/request/dist-node/index.js:69:11)
at request2 (/Users/zhangshaohong/test/uikit/node_modules/.pnpm/@octokit[email protected]/node_modules/@octokit/request/dist-node/index.js:198:14)
at /Users/zhangshaohong/test/uikit/node_modules/.pnpm/@octokit+plugin-request-log@4.0.0_@octokit[email protected]/node_modules/@octokit/plugin-request-log/dist-node/index.js:37:12
at /Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected]/node_modules/before-after-hook/lib/register.js:25:15
at async _GithubSource.getSourceInfo (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:263:22)
at async _Mkcert.getSourceInfo (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:535:24)
at async _Mkcert.initMkcert (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:543:24)
at async Mkcert.init (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:529:7)
at async config (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:638:7)
at async runConfigHook (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected]@types[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68420:25)
 ELIFECYCLE  Command failed with exit code 1.
`

background gradient

Automatically modify the provided material class to render a gradient

TypeError: Cannot read properties of undefined (reading 'morphAttributes')

In Next.js (14.1.3) , I have
<Root backgroundColor='red' sizeX={2} sizeY={1} flexDirection='row'> <Container flexGrow={1} margin={48} backgroundColor='green' /> <Container flexGrow={1} margin={48} backgroundColor='blue' /> </Root>

This is in a project cloned off of the r3f-next-starter which is part of pmndrs. when I put this in a tag the project just crashes. I have no idea why.

Rendering issue in docker with playwright

I'm trying to write some UI tests with screenshots, and it seems like there's some bug when rendering text. I've never seen that before and hope you have some ideas.
Here's a repro.
The screenshot works ok on my MacBook, also I've tried to run it on ubuntu and windows and results are the same as expected.
But if I use microsoft's docker image the text is not rendering properly. There's some sort of diagonal line, the text background is missing. Sometimes I see some artifacts when the text is supposed to be (I've tried different texts).

To check it locally:

• Clone the repo
• npm install
• npm run build-image
• npm run test-in-docker

Sorry, I'm not a docker master and it can be not very optimal.
I don't know where issue is, but I think it has something to do with instancing not working properly. Maybe you have some ideas?

Mixing and matching kits complains about color settings

I had to manually add these colors in, it would be good to validate on install that the colors exist in theme.

./app/components/tooltip.tsx:75:95
Type error: Property 'popoverForeground' does not exist on type '{ foreground: Color; background: Color; card: Color; cardForeground: Color; accent: Color; accentForeground: Color; popover: Color; }'.

73 | {...props}
74 | >

75 |
| ^
76 | {children}
77 |
78 |

SVGs rendering wrong

The component renders my SVGs wrong most of the times.
Here is an example:

Here is an example code snippet on how I use the component:

import CheckIcon from "assets/icon-check.svg";
import {Svg} from "@react-three/uikit";
...
<Svg src={CheckIcon} />

Using the component from @react-three/drei and wrapping it in the component works as expected:

import CheckIcon from "assets/icon-check.svg";
import {Content} from "@react-three/uikit";
import {Svg} from "@react-three/drei";
...
<Content>
  <Svg src={CheckIcon} />
</Content>

This results in what I am looking for:

Thanks for all your work! ❤️

Expanding the available conditionals

Creating responsive UIs with utilities like Tailwind's sm, md, lg, etc., is fantastic. However, UIKit can be even more powerful by allowing attributes to change based on whether a component is in an active immersive session. The use case is straightforward: when using UIKit to render a button in an immersive session, you might want to increase the hit-box and font size compared to a standard web view. This issue aims to discuss the implementation of this feature.

[Vanilla] - `hover` and `active` props do not seem to work after `0.3.4`

Hello, first I just want to say thank you for this incredible library!

I'm a Threlte maintainer and over the past few weeks I've been working on a Threlte library that wraps the vanilla UIKit export (@pmndrs/uikit). After upgrading from 0.3.4, hover and active props seem to no longer have any effect. I've created two small stackblitz repos to demonstrate:

• 0.3.4 - Working
• 0.3.5 - Not working

Visibility hidden not working for children

Please see the repro: https://stackblitz.com/edit/vitejs-vite-npxuu4?file=src%2Fmain.tsx
Expected result: Text "Demo" is not visible
Actual result: Text is visible

Render special characters and emojis

Seems like <Text /> components can't render them for now, is there a way to do that?