`threlte-uikit` wraps [`@pmndrs/uikit`](https://github.com/pmndrs/uikit) in a declarative syntax for use with [Threlte](https://threlte.xyz).
npm install threlte-uikitthrelte-uikit wraps @pmndrs/uikit in a declarative syntax for use with Threlte.
``
npm i threlte-uikit
threlte-uikit should feel very similar to the React flavor.
`svelte
backgroundColor="#ccc"
>
`
The component internals may be accessed via the ref property.
`svelte`
- Container
- Root
- Fullscreen
- Image
- Text
- SVG
- Content
- Video
- provideDefaultProperties()
Allows overriding the default properties for all UIKit components and children components of the component in which it is called.
`ts
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.
`ts`
provideFontFamilies({
roboto: {
light: 'url-to-json',
medium: 'url-to-json',
bold: 'url-to-json',
},
})
Invoke the Threlte interactivity plugin in the same component or higher than your 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.
`svelte`
onpointerenter={() => console.log('pointer entered')}
onpointerleave={() => console.log('pointer left')}
>
Calling interactivity is necessary for any hover or active conditional properties to work.
`svelte``
hover={{ backgroundColor: 'purple' }}
>
...