Light-only brand Style
Onflow components
This is the full catalog of 24 components: Button, Card, Badge, Input, Textarea, Checkbox, Switch, Radio Group, Tabs, Accordion, Input Group, Popover, Tooltip, Sonner, Select, Dialog, Dropdown Menu, Sheet, Drawer, Command, Back to top, Floating actions, Navbar, and Navigation dock. Native installs were checked in three representative consumers (see the install guide). Onflow is always light, even under a dark ancestor, and uses Satoshi.
Brand intro labCard
A native compound surface in default, brand and brand-with-current-background forms, plus the compact size. The surface radius follows the Onflow Shape. On hover or keyboard focus of a child action a Card lifts 2px and sends one reflection across; data-interaction="none" keeps it still. A media frame zooms its image inside the clipped frame. Selected Cards fill with pale water and drain when deselected: try the checkbox Cards here, or the plans in Radio Group.
Select and deselect
Reflection, lift and media
Hover a Card or Tab to its Button: the Card lifts 2px and one 1200 ms light crosses it, once per entry. The media frame zooms its image to 1.06 and lifts 4px with a deeper shadow while the caption follows. The last Card opts out.
Badge
Compact labels in Default's six variants, as plain text, with an icon and as a real link. Every variant pairs text and fill on neutral paint, and status always names its state.
On neutral
Static water & glass · informational labels and a real link
On atmosphere
Static water & glass · informational labels and a real link
Input
A native text and file field with a visible boundary border. Focus is a Deep Flow outline, invalid is danger with a message, and disabled and read-only keep a recognizable field.
Required. Enter at least three characters.
Textarea
A native multiline field with the same boundary, focus and invalid treatment as Input, plus disabled and read-only states.
Required. Enter at least three characters.
Checkbox
A boundary-bordered box that fills Deep Flow with a Mist mark when checked or indeterminate. Invalid turns danger, disabled dims to half, and every control has a visible label.
Switch
A glass pill, 40×24 or 32×18 small, with a white thumb ringed in Deep Flow. Checking sends Flow Blue water across the track and the Flow Blue track with its Deep Flow border arrives once it has crossed; unchecking drains it. Only the thumb moves; disabled and invalid Switches never fill, and data-interaction="none" skips the water.
Radio Group
Circular radios with a boundary border that fill Deep Flow with a Mist dot when selected, plus a disabled item and an invalid group. As cards, each plan is a selected-styled Card whose label covers it: the selected plan fills with pale water and takes a Deep Flow border, the arrow keys move the selection and the Card shows the focus.
Cards
A disabled option never fills. With data-interaction="none" the border and the radio still mark the selection.
Tabs
Default and line lists in horizontal and vertical orientation. The selected tab carries a static Deep Flow bar and Deep Flow text, never Flow Blue alone; disabled tabs are skipped by the arrow keys.
Accordion
Single and multiple disclosure with a Deep Flow label, a chevron pair and a disabled item. Panels show and hide without a height animation, so focus rings stay whole.
Input Group
One bordered field that owns the boundary, the Deep Flow focus and the danger state while its Input, Textarea, text and Button parts stay borderless. Addons sit inline or on a block edge, and inner Buttons use a smaller radius than the group so there is no pill seam.
Required. Enter a valid address.
Popover
An opaque white surface with a heading, description, a labelled field and a close action, with the overlay radius and one restrained shadow. It renders into a stable host inside the Onflow scope or into body with an explicit scope, and stays light under a dark ancestor.
Safe host and body portal
Under a dark ancestor (body portal)
Tooltip
A Deep Flow label with Mist text and a matching arrow, readable at 15.53:1, on all four sides, on an icon Button and under a dark ancestor. It describes its trigger while open and only fades.
Sides and icon Button
Under a dark ancestor (body portal)
Sonner
Toasts on the white overlay surface with Deep Flow text, a subtle ring, the overlay radius and one restrained shadow, in default, success, info, warning, error, action and promise forms. Status icons carry their own colour, the action button keeps a solid Deep Flow focus outline, and the toaster stays light even under a dark ancestor or a dark html class because it never follows next-themes.
Toasts from the Onflow scope (bottom right)
Under a dark ancestor (top right, stays light)
Select
A field-like trigger with a boundary border, Deep Flow focus and danger when invalid, opening an opaque overlay list with groups, labels, a separator and disabled items. The selected item carries a Deep Flow check, and the popup stays light in a host, in body with an explicit scope and under a dark ancestor.
Default, placeholder and states
Required. Choose a fruit.
Groups, labels, separator and a disabled item
Body portal with an explicit scope, and under a dark ancestor
Dialog
A white modal surface with Deep Flow text, a subtle ring, the overlay radius and one restrained shadow over a low-alpha Deep Flow backdrop. It traps focus, locks page scroll, returns focus on Escape, and renders into a stable host or into body with an explicit scope, light even under a dark ancestor. An initially open dialog waits for its host instead of flashing into body.
Form, no close button and long content
Body portal with an explicit scope, and an initially open dialog
Under a dark ancestor (body portal)
Sheet
An edge-attached modal panel on the top, right, bottom or left, with the dialog backdrop, surface, ring and shadow. Only the free-edge corners use the overlay radius; the corners on the viewport edge stay square, including under the square Shape. It fades in without sliding, traps focus, locks page scroll, and renders into a stable host or into body with an explicit scope, light even under a dark ancestor.
Four sides, safe host
Form with footer, no close button and square Shape
Body portal with an explicit scope, and under a dark ancestor
Drawer
A modal panel that slides in from the bottom by default, or from the top, left or right, with the dialog backdrop, surface, ring and shadow. Base UI keeps the swipe-to-dismiss and snap-point behavior; only the free-edge corners use the overlay radius and the viewport edge stays square, including under the square Shape. The handle uses the boundary colour, and the drawer renders into a stable host or into body with an explicit scope, light even under a dark ancestor.
Bottom by default, and the other directions, in a safe host
Form with footer, snap points and square Shape
Body portal with an explicit scope, and under a dark ancestor
Command
A searchable command list on the overlay surface, inline or inside a dialog. The search field is an input group that owns one border and the Deep Flow focus ring, typing filters the items, the arrow keys move a subtle accent highlight with Deep Flow text, and Enter selects. It has groups, shortcuts, a separator, a checked item, a disabled item and an empty state, and the dialog renders into a stable host or into body with an explicit scope, light even under a dark ancestor.
Inline command with groups, shortcuts, a separator, a checked and a disabled item
Selected: none
Command dialog in a safe host, and with the square Shape
Selected: noneSelected: noneBody portal with an explicit scope, and under a dark ancestor
Selected: noneBack to top
A fixed circular Onflow Button that fades in after scrolling past a threshold and returns to the top, moving focus to the top target. Hidden, it is inert, unfocusable and click-through. Scroll inside the frame: the button fills with water to the scroll progress, a hover sends one ripple, and the ring of water on its rim turns while you scroll or hover, then calms to rest. The page keeps its own scroll; under reduced motion the jump is instant, the water moves in quarter steps and the ring stays still.
Floating actions
A corner-fixed Onflow Button, or an expandable disclosure of actions that opens toward the page interior. Escape, an outside press or an action closes it and returns focus to the trigger; collapsed actions are inert and hidden from assistive technology. Scroll and interact inside the frame; it fades without moving, and under reduced motion without fading.
Current background
One macro surface specimen: the static `.mui-onflow-macro` radius with the current recipe painted as layered gradients. Content stays Deep Flow throughout.
Work that keeps flowing
A macro surface with the current background: Mist washes in from the top corners over Flow Blue, and the text stays Deep Flow.
Glass
The three glass tiers on the atmosphere, the same tiers under the `data-onflow-glass="reduce"` opt-out, and the corner notch utility. Glass is on by default and falls back to opaque fills without backdrop-filter support.
Default
Glass
.mui-onflow-glassTranslucent fill, blur, white edge and cool shadow: Navbar, Dock, Card.
Dense
.mui-onflow-glass-denseNearly opaque, no blur: fields, Dialog, Sheet, Drawer.
Opted out with data-onflow-glass="reduce": opaque Mist-tinted fills, no blur
Glass
.mui-onflow-glassTranslucent fill, blur, white edge and cool shadow: Navbar, Dock, Card.
Dense
.mui-onflow-glass-denseNearly opaque, no blur: fields, Dialog, Sheet, Drawer.
Logo slotNotch
.mui-onflow-notch cuts a corner for a logo, sized by --mui-onflow-notch-w and -h. The logo is a sibling placed in the cut-out.
Droplet cursor
The opt-in droplet cursor, mounted once for this page with an on/off switch. A glass drop follows the pointer with spring inertia, becomes a lens around buttons, links and data-cursor="lens" elements, ripples on click and fades over text fields. data-cursor="default" keeps the drop without lenses, data-cursor="none" hides it, disabled controls never lens, and a data-onflow-glass="reduce" scope makes it opaque. It stays on inside the Dialog and Drawer specimens and is off for touch and reduced motion.
Inline text link, a data-cursor="lens" chip, a data-cursor="default" link and a data-cursor="none" zone.
Scope with data-onflow-glass="reduce": the drop and lens turn opaque, without blur.
Move fast across the empty glass to see the stretch, then click anywhere for a ripple. Open a Dialog or Drawer specimen: the drop keeps working inside the modal.