threlte-uikit

threlte-uikit wraps @pmndrs/uikit in a declarative syntax for use with Threlte.

npm i threlte-uikit

Getting started

threlte-uikit should feel very similar to the React flavor.

<script>
  import { T } from '@threlte/core'
  import { Root, Container, Text } from 'threlte-uikit'
</script>

<T.Group>
  <Root
    padding={10}
    backgroundColor="#ccc"
  >
    <Container>
      <Text text="hello uikit!" />
    </Container>
  </Root>
</T.Group>

The component internals may be accessed via the ref property.

<Container bind:ref>...</Container>

Components

• Container
• Root
• Fullscreen
• Image
• Text
• SVG
• Content
• Video

Context providers

• provideDefaultProperties()

Allows overriding the default properties for all UIKit components and children components of the component in which it is called.

let defaultProps = $state({
  margin: 10,
})

provideDefaultProperties(() => defaultProps)

• provideFontFamilies()

Provides new font families to all children. Instructions for creating fonts that can be consumed by UIKit can be found here.

provideFontFamilies({
  roboto: {
    light: 'url-to-json',
    medium: 'url-to-json',
    bold: 'url-to-json',
  },
})

Events

Invoke the Threlte interactivity plugin in the same component or higher than your <Root> to enable events. All events supported by interactivity are supported. Svelte 5 style callback props are used instead of event dispatching to allow Svelte 4 and 5 compatibility.

<Container
  onclick={() => console.log('click')}
  onpointerenter={() => console.log('pointer entered')}
  onpointerleave={() => console.log('pointer left')}
>
  <Text text="I am a button" />
</Container>

Calling interactivity is necessary for any hover or active conditional properties to work.

<Container
  backgroundColor="red"
  hover={{ backgroundColor: 'purple' }}
>
  ...
</Container>