Guides
Upgrading to 0.2
0.2 is a visual and behavioral overhaul. Because components are copied into your repo, you upgrade by re-adding the ones you use. This page lists what to expect.
Upgrade steps
- Replace your token file with the new
templates/vibeui.css(or re-runinitinto a temp folder and diff). Re-apply your own overrides afterwards. - Make sure it is imported after
@import "tailwindcss". The new file also carries keyframes and the dark variant. - Re-add each component you use:
add button dialog …. Review the diff against your edits before overwriting. - Search your code for the changed APIs below.
Tokens
| Change | Detail |
|---|---|
| New accent system | --accent, --accent-ink, --accent-soft and --ring replace the old focus color. |
| Dark accent is monochrome | In dark mode the accent is the ink itself (#f4f2ee), not a color. |
| --focus removed | Focus uses the accent outline (global) and --ring. |
| New surface | --surface-sunken for tracks, code and wells. |
| New shadows | --shadow-pop and --shadow-inset, alongside quiet and lift (both reworked as layered shadows). |
| Radii changed | sm/md/lg are now 8/12/16px (were 6/10/14) and a new xl is 22px. They are registered with @theme, so use rounded-sm|md|lg|xl instead of rounded-[var(--radius-md)]. |
| Easing tokens | ease-out and ease-spring are theme values (use ease-out / ease-spring classes). |
| Keyframes ship in the file | animate-* utilities are declared with --animate-*; copied components no longer need globals from this repo. |
| dark variant | @custom-variant dark makes dark: follow the .dark class. Add .light / .dark on any element to scope a palette. |
Component changes
Behavior
| Component | Change |
|---|---|
| Checkbox, RadioGroup | Now native <input> elements: they submit with forms, and clicking the label works. New description prop. |
| Dialog | Portaled to <body>, traps focus, restores it on close, animates out. Add DialogFooter for actions. It no longer imports Button. |
| Sheet | Slides in from its edge and out again; adds description and side="bottom". Portaled. |
| Popover, DropdownMenu, HoverCard | Animate out before unmounting. Popover gains side; DropdownMenu gains icon, shortcut and align. |
| Toast | Per-toast timer with hover-to-pause, a countdown bar, dismiss button and exit animation. toast() accepts tone. |
| Calendar | Today is highlighted after hydration only. New defaultMonth prop; no longer needs an effect to sync value. |
| Command | Keyboard navigation (↑ ↓ Enter), item icon, autoFocus prop. |
| FlipText | Self-contained: hover the text itself. Previously needed a group/flip parent. |
| RollingText | Any number of words; width fits the longest. New intervalMs. |
| Spinner | SVG using currentColor, not a bordered span. |
| BookFlip | A real page turn instead of a hover tilt. |
| SplitShowcase | Uses clip-path, so left-hand content no longer reflows while dragging. Pointer events replace mouse events. |
| ScrollStack | Pure CSS sticky stacking. Optional height makes it its own scroller. |
New props and variants
| Component | Added |
|---|---|
| Button | variant accent and danger, size icon-sm, loading |
| Pill | tone accent, pulse |
| Avatar | sizes xs and xl; AvatarGroup max; initials from two words |
| Field | error |
| Tabs | variant line |
| Accordion | type single | multiple, defaultOpen |
| Stepper | orientation horizontal |
| Meter | tone, segments (now a segmented gauge) |
| Marquee | reverse, duration |
| OrbitRing | center, radius |
| CountUp | decimals |
| BlurReveal | delay |
| List item | leading |
| Separator | animated |
| SocialLinks | youtube, instagram |
Visual changes to expect
Controls are slightly larger and rounder, shadows are layered, and primary buttons have a faint top highlight. Switch, checkbox, slider and progress use the accent. Everything gained hover, press and enter/exit motion: see Motion.
CLI and registry
addnow copies sibling components a file imports (for examplefooter-ctabringsbutton).- Registry entries gain
registryDependenciesand a generatedapitable; the MCPget_componenttool returns both. - The package version is now read from
package.json.
If your own scripts read registry/components.json, note the new registryDependencies and api fields on each component. See Registry.
The showcase site
/gallery is now /components (it redirects), and each component has its own page at /components/<name>. Demos live in src/components/showcase/demos/.
bash
# find usages of the old radius syntax in your own code
grep -rn "rounded-\[var(--radius" src