Get started

React 19, Tailwind CSS v4 and a shadcn/ui project. Starting fresh? Create one with:

Velora doesn't import Radix or Base UI, so it works whichever primitive layer your shadcn project uses. About half the components need motion; the CLI installs it when one does.

Every component page has its install command. Paste the registry URL:

That writes components/velora/marquee.tsx and merges any keyframes and brand tokens into your globals.css. Then use it:

import { Marquee } from "@/components/velora/marquee";

export function Logos() {
  return (
    <Marquee pauseOnHover>
      <span>Acme</span>
      <span>Northwind</span>
      <span>Lumen</span>
    </Marquee>
  );
}

Blocks install the same way and bring every component they use along.

Register Velora once and install by name instead of URL:

or add it to components.json yourself:

{
  "registries": {
    "@velora": "https://velora.colorlib.com/r/{name}.json"
  }
}

Then:

• shadcn MCP server: run npx shadcn@latest mcp init and, with the @velora namespace registered, agents in Cursor, Claude Code or VS Code can search and install Velora components for you.
• Copy prompt: every component page has a button that copies the install command, a working example and the props — paste it into any chat.
• llms.txt: /llms.txt indexes everything; /llms-full.txt adds props, accessibility notes and an example for every component.

Gradients, beams and glows read four brand variables (--brand, --brand-from, --brand-via, --brand-to) that the CLI adds to your CSS, next to your shadcn tokens. Change them and every component follows — pick a preset on the themes page.

Every animated component respects prefers-reduced-motion on its own — so it still does after you install it — and each docs page lists what reduced-motion, keyboard and screen-reader users get. Anything that loops pauses on hover and focus.