Animated, accessible components for React and Svelte.
One spec, two real ports, source you own.
Site · Docs · Components · Apache-2.0
- 240+ components, two ports. Each one is built once from a shared spec and shipped as a hand-written React port and Svelte port: same props, same motion, same accessibility.
- A shadcn drop-in. The shadcn CLI copies source into your project; part names,
data-slots andvariant/sizeprops match shadcn/ui and shadcn-svelte. - Accessible by construction. Interactive parts sit on Base UI (React) and bits-ui (Svelte), the primitives shadcn itself uses.
- Motion that answers the hand. Presses squish, popovers zoom from their trigger, panels grow instead of popping. All CSS, all tokens, all honouring reduced motion.
- Your theme drives it. Components read CSS variables and never name a colour.
- More than primitives. Charts on d3 and SVG, blocks, text effects, backgrounds, agent UI, OG images and emails.
In a project with Tailwind CSS v4 and shadcn init done:
npx shadcn@latest add https://baby-ui.pages.dev/r/button.json
npx shadcn-svelte@latest add https://baby-ui.pages.dev/svelte/r/button.jsonThe installation guide covers a fresh project, and every component page has its command ready.
Setup, the dev loop and the checks are in CONTRIBUTING.md.
Apache-2.0, see LICENSE. Ported components credit their sources in
THIRD_PARTY_LICENSES.md.