Animated componentsfor React

Pick a component. Add it to your project.

installable components
533
free components
399
full-page templates
104
Live preview
Deployed to production
split-text.tsx1100ms · --wb-ease-out

What every component ships with

Each item on the right is interactive.

Installed as source

One command writes the .tsx into your project. There is no WebberUI package to install and no version lock, so upgrading is your call.

npx webberui@latest add split-text.en

  • components/ui/split-text.tsxwritten
  • lib/utils.tswritten
  • package.json + motionwritten

Respects reduced motion

When the OS requests reduced motion, components skip translation and scaling and render their final state.

Off: plays the full animation

Timing through CSS variables

Duration and easing are exposed as --wb-* variables. Override them globally or per component without editing the source.

--wb-duration-normal: 400ms;

IME-safe input

Input components check composition state, so pressing Enter to pick a candidate in a Chinese or Japanese IME never submits the form. Docs and site search support Traditional Chinese.

Not composing: Enter sends

WebberUI Pro is available

104 full-page templates, 134 Pro components and 6 industry UI Starter Kits — the complete source, installed straight into your project.

See plans