Valvet UI is a premium collection of beautiful, accessible React components built with Tailwind CSS, GSAP, and Framer Motion. You can copy and paste components directly into your project or install them via CLI.

Valvet UI offers both free and premium components. Many components are available for free, while advanced components with premium animations require a Pro subscription starting at $9/month.

How do I install Valvet UI components?

Run 'npx valvetui init' in your terminal to set up your project, then use 'npx shadcn add @valvetui/component-name' to install any component. Components are added directly to your codebase.

Does Valvet UI work with Next.js?

Yes! Valvet UI is built for React and works perfectly with Next.js (both App Router and Pages Router), Vite, Create React App, Remix, and any other React framework.

What animations are included?

Valvet UI includes premium GSAP and Framer Motion animations including scroll animations, hover effects, page transitions, text effects, and more. All animations are optimized for performance.

Can I customize the components?

Absolutely! All components are added to your codebase as source files, not as a package dependency. You have full control to customize colors, sizes, animations, and functionality.

BACK

CLI Setup v2.4

Set up your
environment.

Get started with our open-source collection. No API keys required, just pure React components.

Initialize Registry

Run the init command to bootstrap the registry in your project. This creates the necessary configuration files.

npx valvetui init

Configure Free Tier

When prompted for a Pro account, simply select 'No'. The CLI will configure your project for the public registry automatically.

Install Components

You're ready to go. Install any free component directly into your codebase.

npx shadcn add @valvetui/ai-input-01

Pro Tip

If you attempt to install a premium component (like ai-input-02) without configuring a key, the CLI will return a 401 Unauthorized error.

terminal — zsh

$npx valvetui init

? Do you have a Valvet UI Pro account? (y/N)

✔ Registry configured for free tier.

$npx shadcn add @valvetui/ai-input-01

Installing @valvetui/ai-input-01...

✔ Done.

BACK

CLI Setup v2.4

Set up your
environment.

Get started with our open-source collection. No API keys required, just pure React components.

Initialize Registry

Run the init command to bootstrap the registry in your project. This creates the necessary configuration files.

npx valvetui init

Configure Free Tier

When prompted for a Pro account, simply select 'No'. The CLI will configure your project for the public registry automatically.

Install Components

You're ready to go. Install any free component directly into your codebase.

npx shadcn add @valvetui/ai-input-01

Pro Tip

If you attempt to install a premium component (like ai-input-02) without configuring a key, the CLI will return a 401 Unauthorized error.

terminal — zsh

$npx valvetui init

? Do you have a Valvet UI Pro account? (y/N)

✔ Registry configured for free tier.

$npx shadcn add @valvetui/ai-input-01

Installing @valvetui/ai-input-01...

✔ Done.

Set up your environment.

Initialize Registry

Configure Free Tier

Install Components

Pro Tip

Set up your environment.

Initialize Registry

Configure Free Tier

Install Components

Pro Tip

Set up your
environment.

Set up your
environment.