ValyroUI — React components in 19 themes

ValyroUI — a React UI kit with themes, a free MIT core and Pro components you install as source code via CLI, shadcn or MCP.

374 components and 19 themes; the free core has 111 components and the vercel, glass, high-contrast themes. Get started · All components

Foundations

The building blocks of any interface

• Basics — Buttons, badges, avatars, tooltips and loading indicators (17)
• Navigation and layout — App shell, header, sidebar, tabs, menus and a command palette (15)
• Overlays and notifications — Alerts, toasts, dialogs, sheets, popovers and onboarding tours (11)

Forms and data

Input, tables, metrics and charts

• Forms and input — Fields, selects, dates, masks, colors, files and filters (43)
• Data and metrics — Tables, grids, lists, trees, cards and dashboard widgets (27)
• Charts and analytics — Charts, maps, diagrams and “what if” scenarios (24)

Applications

Ready-made SaaS, AI and tooling screens

• Work and teams — Calendar, scheduler, kanban, CRM, approvals and a rich text editor (17)
• Account and access — 2FA, sessions and tokens, profile, settings, permissions and an audit log (12)
• AI chat and agents — AI chat, prompt input, model picker, reasoning, tools and agents (25)
• Image generation — Prompts and generation settings, results, inpainting and a node graph (19)
• Developer tools — Code, logs, diffs, API keys, webhooks, service status and feature flags (12)

Sites and stores

Landing pages, stores and media

• Landing pages and brand — Hero, pricing, testimonials, FAQ, footer and a design system showcase (17)
• Shop and payments — Catalog, cart, checkout, cards, wallet and subscriptions (24)
• Content and social — Articles, news, facts and sources, posts, comments and media (30)
• Games — Tier lists, meta, counterpicks, tournament brackets and patch notes for gaming sites (6)

Motion

Animation, backgrounds, 3D and WebGL

• Animated components — Spring buttons, reordering lists, radial menus and layered reveals (23)
• Effects — Liquid glass, backgrounds, and text, number and cursor effects (24)
• 3D and motion — Motion for any component, scroll scenes, 3D objects and buttons, WebGL (28)

Questions

Can I use it for free in a commercial product?

Yes. The core, 111 components and 3 themes, is MIT-licensed, commercial use included. Pro is a paid license for everything else.

Do I need Tailwind?

No: the components are styled with CSS variables and work without it. With Tailwind v4 in the project, valyro-ui/tailwind.css turns every theme token into a utility.

Does it work with Next.js and server rendering?

Yes, on React 17, 18 and 19. Every component renders to HTML from its props; in React Server Components use the named exports of the parts (DialogTrigger, TabsTab, …).

How accessible is it?

Keyboard, focus and ARIA patterns are built in, axe checks every Storybook story, and High Contrast is a theme of its own. The behaviour is being brought to the level of React Aria: see the roadmap.

Can I make my own theme?

Yes. A theme is a set of --ui-* CSS variables under a data-theme attribute: override the ones you need on your own selector, or start from the closest of the 19 themes.

Can I use it without React?

The styles, yes: Vue, Nuxt, SvelteKit, Angular, SolidStart and plain HTML use the same CSS, and their guides give the markup. Behaviour such as menus and dialogs comes with the React components.

What does Pro add?

All 374 components and all 19 themes with their fonts, the Pro registry for the CLI, templates, SwiftUI and WordPress.