0

Beautiful interactions,
owned by your codebase.

Carefully engineered React components, motion primitives, and visual effects installed directly into your project.

Browse componentsGet started
Choose installation target
npx shadcn@latest add @sona-ui/magnetic-button

New and noteworthy

Components with a point of view.

Explore the collection
Interface

Fluid Tabs

A shared-layout tab system with a physical active state.

Interface

Animated Switch

Tactile state feedback with a compact API.

Shaders

Mesh Gradient

A configurable mesh field for bounded visual atmosphere.

Frequency
15%
Interface

Fluid Slider

A precise slider with fluid, motion-aware feedback.

Copy it. Read it. Make it yours.

The component is yours once you install it.

Sona UI gives you source, not a black box. Install from the registry, adapt the implementation, and make the motion and theme fit your product.

Read installation
  1. 01
    Install

    Pull a component and its foundations through the registry.

  2. 02
    Own the source

    Read, change, and compose the implementation in your app.

  3. 03
    Shape the system

    Adapt tokens and motion to the product you are actually building.

Built in the open

Engineering proof over marketing filler.

Open sourceInspect the implementation and contribute.Release historySee what has changed and why.Validated workflowRegistry and agent resources designed to work together.

Ready when you are

Build the interaction your product deserves.

Browse components View on GitHub