Manicat UI

Changelog

Every free component and block added to Manicat UI, newest first.

New free components and blocks ship regularly. Every entry links to its live preview on this site.

2026-10-14

Added

  • Faithful Vue and Svelte ports, rebuilt from the React source with the same markup, CSS, motion and lucide icons, and checked against the React demo with a pixel diff: waffle chart, sortable data table, carousel, treemap, swipe actions, expanding search, expanding button group, usage meter, inline edit, card stack, resizable panels and ridgeline. They join the components ported the same way earlier in the week.
  • React Native colours are now generated from foundation.css (scripts/gen-rn-tokens.mjs): every oklch() is converted to sRGB for light, dark and each accent, and the SwiftUI tokens are generated from the same values, so the three platforms cannot drift. New tokens: surfaceRaised, borderSubtle, accentForeground, controlGlyph, controlFill, plus accents and radii.
  • React Native text uses Inter and Geist like the web, through one Text/TextInput (lib/rn-text.tsx) that sets the family, weight and line height; useManicatFonts() loads the fonts on a device with expo-font.
  • Real lucide icons (lucide-react-native) replace the text glyphs in 28 React Native components, and the chevrons, checks and close buttons of the rest are being moved over.
  • The parity script can click and hover with real mouse input (--real), drag (--drag), and pick its own targets (--sel), so swipes, sliders, carousels and panels are compared in motion.

Changed

  • The counter used by the usage meter can keep the digits that are off the wheel in the text tree (hideOffWheel: false), as the React usage meter does.
  • The Vue ports no longer type-fail: defineModel options, template handlers and refs were tightened, and pnpm check (typecheck, lint, registry) is green again apart from one lint warning.
  • check:parity compares Svelte and Vue CSS with the Reka UI and Bits UI variable names treated as the same, since those two libraries name them differently.

Fixed

  • The resizable panels demo no longer collapses to its content height: the height class lost to the component's own height: 100%, so the demo now sizes a wrapper.
  • Svelte inline edit lost focus right after a real click, closing the editor at once.
  • Svelte copy button and resizable panels no longer name a variable state, which shadows the $state rune.

2026-10-13

Added

  • Svelte 5 and SwiftUI ports for every component and block, installable as @manicat/<name>-svelte and @manicat/<name>-swift, with a Usage snippet in each format.
  • Viewers for Svelte, Vue, React Native (react-native-web) and Swift that run every Usage snippet next to the React demo.
  • check:registry now compares the Svelte and Vue CSS, the Swift and React Native tokens, and compiles every Vue port.

Fixed

  • The phone input's country button was invisible and unclickable.
  • Nested buttons inside Radix triggers and closes, duplicate keys in the swipe actions demo, and avatar images from pravatar.
  • Install commands print the real site origin (NEXT_PUBLIC_SITE_URL) instead of localhost.

2026-10-12

Changed

  • Component pages now show a copy-paste ready Usage snippet and concrete, real-world Examples, each with a Preview/Code switch.
  • Code cards put the file name, language badge and copy button on one row; a framework switcher replaces the old type badge.

2026-10-05

Added

  • Morph select (component): A select whose trigger grows into the list, with a gliding highlight and type-ahead.

2026-10-03

Added

  • Money input (component): A currency field with live grouping, stable width, rolling digits, and minor-unit output.

2026-10-02

Added

  • Button group (component): Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
  • Floating button group (component): Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.
  • Expanding button group (component): Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.

2026-10-01

Added

  • Card stack (component): Review a deck one card at a time, with a throw and an undo.

2026-09-30

Added

  • Password strength (component): Show how strong a new password is while it is typed.
  • Expanding search (component): An icon that morphs into a search field with results beneath it.
  • JSON viewer (component): A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Initial release

97 components and 22 blocks, plus the design tokens (registry/foundation.css) and motion presets (lib/motion-tokens.ts) they share.

Components

Blocks

FAQ

Short answers to the questions that come up most when adopting Manicat UI.

On this page

2026-10-14AddedChangedFixed2026-10-13AddedFixed2026-10-12Changed2026-10-05Added2026-10-03Added2026-10-02Added2026-10-01Added2026-09-30AddedInitial releaseComponentsBlocks