v1.0.0

uikit 1.0

1.0 is now officially out

4 Major Advantages

1. Breaking changes to be more aligned with html/css meeting developers where they are
2. vanilla three.js - pmndrs/uikit - is now the stable core of the project simplifying the adoption across the three.js ecosystem
3. All kits and icon packages are now available as React Three Fiber and vanilla three.js version
4. Simplified architecture to improve maintainability while the project and its use cases mature

What has changed for developers?

Uikit 1.0 introduces several new properties such as zIndex, display: contents, white-space, classList, and ìmportant. It aligns more closely with HTML/CSS behavior through property inheritance, improved styling APIs, and consistent naming conventions. Unnecassary components like RootandFontFamilyProviderare deprecated and can be replaced by simpler Container patterns and unified style management. Obsolete features, includingopacity-specific properties, useRootSize, and isInteractionPanel`, have been removed in favor of an API more aligned with HTML/CSS.

The full list of changes and the guide for migrating to uikit 1.0 can be found here.

v0.8.0

uikit v0.8.0

Alongside a few bug fixes, this release has some small UX improvements and a small but important breaking change for all vanilla uikit users.

Features

• double click to select word in input
• text selection supporting dragging outside
• more material properties that can be changed per UI element (depthWrite, depthTest, renderOrder)

Breaking Changes

• for uikit vanilla element.internals. pointerEventsProperties was renamed to element.internals.defaultProperties
• for uikit vanilla the depthTest property are not automatically propagated throughout the UI. If necessary, propagate them manually by providing the element.internals.defaultProperties to the default properties when creating a child of element (e.g. new Container({...}, element.internals.defaultProperties)).

v0.7.0

uikit v0.7.0

Performance

• drastically increased performance for large numbers of elements by reducing unnecessary matrix multiplications and scene traversals
• improved raycasting performance

Breaking Changes

• for uikit vanilla the pointer events properties (pointerEvents, pointerEventsType, pointerEventsOrder) are not automatically propagated throughout the UI. If necessary, propagate them manually by providing the element.internals.pointerEventsProperties to the default properties when creating a child of element (e.g. new Container({...}, element.internals.pointerEventsProperties)).

v0.6.0

uikit v0.6.0

Fixes

• fix #117: resizing buffer before rearranging elements into "safe buffer space"
  -> fixes disappearing elements

Performance

• portals only render the content if they are not clipped

Breaking Changes

• Lucide Icons are updated to the latest version including name changes

v0.5.0

uikit v0.5.0

Features

• draggable scroll bar

Fixes

• useMeasureText never loading the font
• make <Portal> usable in XR

Breaking Changes

• drag to scroll is disabled when using the mouse to mimic typical browser interactions

v0.4.0

uikit v0.4.0

• dpr property for portals
• improved Portal responsiveness and decoupling between parent scene
• Video component in default kit with VideoControls
• percentage in transforms (e.g. transformTranslateX="-50%")
• alignments to react-three/xr
• clipping plane improvements (now doesn't lag behind when moving panels)
• bug fixes

Breaking Changes

• due to popular demand ref.current.setStyle now merges with the current style instead of replacing it
• pointerEvents is set to "auto" on the root by default, to align uikit closer to css where pointerEvents: auto is the default. To keep the old behavior, set pointerEvents="listener" on the root / fullscreen component.

v0.3.0

uikit v0.3.0

• support for display: none
• support for visibility: hidden
• Preview and htmlToCode allow to convert html+css+shadcn+tailwind to uikit code
• expose ref.current.getStyle

Breaking Changes

all breaking changes are made to make uikit more compatible with html/css

• cli now installs into subfolders for each kit to allow mixing kits #27
• property border changed to borderWidth
• property horizontalAlign of text changed to textAlign
• lineHeight is now receive absolute values and percentages instead of multipliers (lineHeight 1.3 changes to "130%")

v0.2.0

v0.2.0 upgrades to yoga 3.0 🎉

yoga3.0 announcement

@react-three/uikit now uses web defaults making transitions between html/css easier:

Breaking Changes

• flexDirection default is now row
• flexShrink default is now 1
• alignContent default is now stretch

Migration

Explicitly set flexDirection to column where it was previously omitted. Set flexShrink to 0 where content is shrunken.
All examples are already migreated.