Introduction

Devsloka UI is a collection of animated, accessible React components that you copy into your project and make your own. It follows shadcn/ui conventions, so everything installs with the shadcn CLI and drops into components/ui.

Principles

You own the code

Components are copied into your project, not installed as a package. Read them, change them, delete what you don't need.

Accessible by default

Built on Radix primitives where it matters: real buttons, radios, tabs and dialogs, keyboard navigation, focus management and labelled controls.

Follows your theme

Colors come from your shadcn theme tokens, so every component fits your brand and switches between light and dark mode on its own.

Motion with restraint

Animations use Motion and CSS, respect reduced-motion settings, and canvas effects pause when they're off screen.

What's inside

  • Components: interactive building blocks such as morphing navigation, radio cards, multi-select, tours, dialogs and product cards.
  • Backgrounds: animated canvas and CSS layers you drop behind any section.
  • Hooks: small, SSR-safe utilities like useLocalStorage, useDebounce and useFetch.
  • Blocks: complete page sections such as heroes, pricing, FAQs and footers.

Built with

  • React 19
  • Next.js
  • Tailwind CSS v4
  • Motion
  • Radix UI
  • TypeScript

Get started

Set up your project and add your first component in a minute.

Installation →