component library · react + vue
One design system, two frameworks.
75NeoUI ships the same components for React and Vue from one set of styles. The recipe, the slot names and the props live in a single module, so the two adapters cannot drift apart.
the cascade
Four layers, one class string
Anything that can restyle a component enters the same cascade, folded weakest first. Tailwind-merge settles conflicts, so a later layer replaces the utility it conflicts with and every other utility survives. A component renders a finished string with no merging of its own.
- 1
The recipe
What the component looks like before anyone says anything.
- 2
Every
Themeabove itAlready folded into one config.
- 3
The
uipropThis call site, per slot.
- 4
classThis call site, reaching the base slot only.
color
One token per color
There is no second token for a hover shade and no third for a border. A recipe asks for the same color at a different strength, so rebranding is one line per color and no role is left to retune by hand.
- /10
- a soft, tinted fill
- /15
- that fill, hovered
- /25
- a hairline ring, and focus
- /50
- a ring that reads as a border
- /75
- a solid fill, hovered
- full
- a solid fill, or text
Components
full reference →Button
Six variants across seven colors and five sizes, with block, square, loading and icon slots.
4 slots→Avatar
Nine sizes across two shapes and seven colors, with an image, a fallback, and a slot for a framework image component.
3 slots→Accordion
Three variants across three sizes, wrapping Ark UI for keyboard and ARIA behaviour.
9 slots→Carousel
A looping, autoplaying slideshow with keyboard, drag and indicator navigation, wrapping Ark UI.
8 slots→AngleSlider
A circular dial for picking a rotation, across three sizes and seven colors, with markers and a live readout.
11 slots→Clipboard
A read-only field holding a value and a button that copies it, across three sizes and seven colors.
6 slots→TableOfContents
A rail of heading links that follows the reading position, with an indicator that slides to the section on screen.
7 slots→Checkbox
A box, a label and an optional description, across five sizes and seven colors, with a real indeterminate state.
7 slots→Collapsible
One trigger and the panel it opens, across three variants and three sizes, with a collapsed height that turns it into a show-more.
7 slots→ColorPicker
An inline color picker across three sizes and seven accents, with an alpha channel, an eyedropper and preset swatches.
19 slots→Combobox
A field that filters a list as it is typed into, across three sizes and seven accents, single or multiple.
14 slots→DateInput
A date typed a segment at a time, with no format to explain, across three sizes and seven accents.
7 slots→DatePicker
A field with a calendar behind it, taking one date, several, or a range, across three sizes and seven accents.
21 slots→Dialog
A panel over the page in four sizes, with the overlay, the motion and every way out under the caller's control.
10 slots→Switch
A track the thumb slides along, across five sizes and seven colors, with a label, a description and an icon per state.
9 slots→Tooltip
A bubble that appears beside whatever it explains, across three sizes and twelve placements, with an optional arrow.
4 slots→Popover
A titled panel anchored to whatever opened it, across three sizes and twelve placements, with an arrow and a modal mode.
8 slots→Tabs
A row of triggers and the panel the selected one shows, in two variants across three sizes and seven colors.
7 slots→RadioGroup
A legend and the options under it, across five sizes and seven colors, with a description per option.
9 slots→Progress
A track and the part of it that is done, across five thicknesses and seven colors, with an indeterminate state.
6 slots→Slider
A track and a thumb per value, across five thicknesses and seven colors, with marks and a two-thumb range.
10 slots→App
The element an application is wrapped in, publishing a theme, a locale, and the reading direction every right-to-left utility depends on.
1 slots→Container
The measure a page's content is held to, and the gutter that keeps it off the edge. One slot and no variants.
1 slots→Main
The page's content region, tall enough to push a Footer to the bottom of the screen.
1 slots→Header
The bar across the top of a page, and the fullscreen menu it opens where there is no room for a navigation.
13 slots→Footer
Three regions in a row plus two full-bleed bands, reordered so a phone stacks the links above the copyright.
7 slots→Error
The page shown when there is nothing else to show, across seven colors, centred in what the Header leaves.
7 slots→Sidebar
A collapsing column beside the page across three looks and three collapse modes, sliding in over the page on a phone.
14 slots→