Accessible primitives whose whole look is an attribute. Switch the skin, the scheme, the accent, round corners or glass transparency, and every component follows, this page included.
The product below is a single component tree, cut into five slices. Each slice wears another skin. Hover one to open it up.
These run in the skin you picked above.
Stacks, swipes away, pauses on hover, announces politely.
Fuzzy search, groups and shortcuts, driven from the keyboard.
One field per digit; a paste fills them all.
Range, steps and marks, with a thumb you reach by key.
Linear and circular, determinate or not.
Typed segments and a calendar over one value, in any locale.
The same groove in every skin, the chosen item lifted out of it.
Each part is its own element with the attributes a skin reads. Hover the illustration to pull the layers further apart.
Select state and the hidden form valueSelectTrigger role="combobox", data-stateSelectContent role="listbox", placed by the popperSelectItem role="option", data-highlightedOne easing for everything that enters, never past its target. Reduced motion keeps the change and drops the travel.
WAI-ARIA roles, focus that stays where you expect, and the keys each pattern promises. Every page lists them.
Import the styles, wrap the app in the provider with the skins you offer, and drop in the panel. The picker on this page is that panel.
import '@fluixi-ui/styles/all.css';
import { AppearanceProvider, fluixiSkin } from '@fluixi-ui/theme';
import { AppearancePanel } from '@fluixi-ui/appearance';
import { glassSkin } from '@fluixi-ui/skin-glass/skin';
// Round capsules in every skin, from the first visit.
<AppearanceProvider skins={[fluixiSkin, glassSkin]} defaultCorner="round">
<App />
<AppearancePanel />
</AppearanceProvider>