v.1.7.0

Once UI 1.7: Form with Intent

Dependencies
Recharts, PrismJS, CompressorJS and Sharp are now optional dependencies. Please install them according to your needs when migrating to the 1.7 version.

New components

• ScrollContainer: New media display component
• SplitView: New adjustable layout component
• Modal: New fullscreen modal component
• BlobFx: New fluid blob effect
• FadingLettersFx: New fading letters text effect

Component improvements

• Media: Video controls and sizes shorthand
• Timeline: Improved layout and spacing
• Button & IconButton & ToggleButton: New XS and XL sizes
• Input & Textarea: New XS, L, and XL sizes
• Input & Textarea: New Ghost variant
• Flex & Grid: Removed unnecessary class duplication
• Textarea: Fixed "jumping" issue when using auto height

Accessibility improvements

• Button & IconButton & ToggleButton: remove hover effect on touch devices

Once UI 1.7 marks a milestone: our first truly community-driven release. From bug reports to feature contributions, the people using Once UI every day helped shape what it became.

Thank you to everyone who contributed code, filed issues, or shared feedback. This release is better because of you.

shaayar
JExcellence
chanderlud
divyanshudhruv
hitomihiumi
bugsNburgers

v1.6.0

Once UI 1.6

Feature

Flex + Grid

• width, minWidth, maxWidth, height, minHeight, maxHeight props support %, vh, dvh, vw and calc values and apply them as inline style
• translateX and translateY prop (supports number as REM, string as SpacingToken, %, vh, dvh, vw and calc)
• paddings, margins and gaps support numbers as REM
• boolean border shorthand prop (border, borderLeft ... borderX ...): adds 1px solid default border with a new CSS class and CSS variable (aliasing neutral-medium)

ScrollLock

• new utility component

ThemeInit

• new utility component to centralize FAUC logic

Heading, Text

• family prop: override default font family of a variant

Fix, Refact

Flex + Grid

• breakpoint object cascading with inline styles (larger breakpoint styles will cascade to smaller if not set)
• zIndex and borderWidth props accept string

DropdownWrapper, Dialog, ContextMenu

• use new ScrollLock component

Dialog

• fix issue when sometimes Dialog opened as inert, breaking interactivity

UI

Textarea

• styled scrollbar

LineChart

• remove left legend padding when using ReverseY prop

v1.5.3

Once UI 1.5.3

Features

• Bulge + WeatherFx custom triggers
• Zoom cursor on Media enlarge and improved image rendering
• MegaMenu transition refined
• Chart axis reverse positions
• ShineFx inverse prop for inverting effect
• "sharp" shape added to StylePanel
• custom icon in Avatar

New

• CelebrationFx: for confetti and fireworks
• RadialGauge and LinearGauge components for meters

Fixes

• add default minHeight to charts instead of height

v1.5.0

Once UI 1.5 — Curiosity in Code

Accessibility Improvements

DropdownWrapper

• Scroll lock when open
• Better hover + arrow key handling when using simultaneously

EmojiPicker

• Refactored scroll behavior
• Improved performance

---

Component Improvements

Flex

• Custom breakpoint support (now a client component applying props and styles accordingly)
• Hidden elements are no longer removed from the DOM — only classes are applied

Scrollbar

• Allow default scrollbar
• Improved minimal scrollbar UI

Radius

• "full" is now supported for individual border radius (e.g. topLeftRadius="full")

Button

• New shorthand prop rounded using data-border

Background

• Improved line rendering for better visual quality

Card

• More accurate border radius spreading for cleaner tab selection UI
• Removed hover effect on tap for more natural responsive design

Input / Textarea

• Native character count support for maxLength

MegaMenu

• Improved animations
• Support for custom content via ReactNode
• Reduced re-rendering

Icon / IconButton / HeadingLink

• Refactored with new Animation component
• Added fade-in animation for Tooltip

HeadingNav

• Added default heading

Heading / Text

• Adjusted line-height for display sizes
• Separate multiplier variables for display
• Added support for XS and XL label sizes

TiltFx

• Added distortion amount support

UserMenu

• Disabled click when loading

---

New Components

Hover

A minimal component that supports overlaying elements on hover.

Animation

A robust component that can be used to craft more complex interactions.

HoverCard

A portal-based element built on top of Animation for simple hover interactions.

Timeline

A static timeline component that supports various data elements.

Swiper

A new multi-image component that supports mobile gestures and dragging.

TypeFx

A typewriter-style component that supports an array of words.

MatrixFx

A canvas-based animation for dot patterns with style adjustments.

ShineFx

A shining text effect, recently used for AI "Thinking" states.