Veloria UI
v0.1.5 — Now on npm

Build anything.
Ship faster.

Accessible, composable React components with Tailwind CSS. Dark mode, TypeScript, and Next.js ready out of the box.

Get startedBrowse components
Open source·MIT License·Free forever·GitHub
veloria-ui — component preview
components/example.tsx
import { Button, Card, Badge } from "veloria-ui";
 
export function Example() {
  return (
    <Card>
      <Badge variant="soft" color="success">
        New
      </Badge>
      <h2>Veloria UI</h2>
      <p>Build anything faster.</p>
      <Button variant="solid">
        Get started
      </Button>
    </Card>
  );
}

Buttons

Badges

PrimarySuccessWarningDanger

Inputs

Switch

Dark mode enabled
100+ComponentsProduction-ready
18HooksUtility hooks
100%TypeScriptFully typed
WCAGAccessible2.1 compliant

Everything you need

Veloria UI is more than a component library — it is a foundation for building production-grade interfaces without compromise.

Copy and own it

Components are copied directly into your project. You own the code — modify, delete, extend however you need.

Themeable by design

Every color, radius, and font is a CSS custom property. Swap your brand colors in one place and the whole library updates.

Dark mode ready

Every component ships with a dark theme out of the box. Uses the class strategy — works perfectly with next-themes.

Accessible first

Built on Radix UI primitives. Every component ships with correct ARIA attributes, keyboard navigation, and focus management.

TypeScript native

Full type exports for every component, hook, and utility. Autocomplete and type safety throughout your codebase.

Composable API

asChild pattern, forwardRef on every component, and compound component structures. Build your own abstractions on top.

Built-in animation system

veloria-ui/motion is a zero-dependency animation layer built on the Web Animations API. 16 presets, prefers-reduced-motion aware. No Framer Motion required.

Every component you need

From basic buttons to complex kanban boards — components covering every interface pattern you will encounter.

View all components
Button

Solid, outline, ghost, soft, link, danger

Badge

5 color variants with dot support

Avatar

With fallback, status ring, 6 sizes

Tooltip

Radix-powered, all four sides

Tag

Closable with icon slot

Chip

Toggleable with avatar/icon

Input

Icon slots, sizes, error state

Select

Full Radix Select primitives

Checkbox

With label and description

Switch

Three sizes with label

OTPInput

Auto-advance, paste support

RatingInput

Star rating with hover state

Card

5 variants with all sub-slots

DataTable

Sortable, loading, empty states

Calendar

Month picker with highlights

Timeline

Vertical events with icons

KanbanBoard

Drag-and-drop columns

JsonViewer

Collapsible syntax tree

Modal

Size variants sm to full

Drawer

Slides from any edge

CommandDialog

⌘K command palette

ConfirmDialog

Async confirm with danger variant

Popover

Floating panel

Tour

Onboarding step-by-step

Skeleton

Text, rect, circle variants

VirtualList

Windowed renderer for large lists

InfiniteScroll

IntersectionObserver-based

ThemeSwitcher

Icon, toggle, select variants

CopyButton

With success feedback

CodeBlock

Copy button, line numbers

Showing 30 components. See full catalog →

Up and running
in minutes

Install once, import anywhere. Veloria UI integrates directly with your existing Tailwind setup — no theme configuration headaches.

bash
$npm install veloria-ui

Or use the CLI

Copy individual components directly into your project — you own the code.

bash
$npx veloria-ui add button card modal
01

Install the package

bash
$npm install veloria-ui
02

Import the stylesheet

js
// app/layout.tsx
import "veloria-ui/styles";
03

Add the Tailwind plugin

ts
// tailwind.config.ts
import { veloriaPlugin } from "veloria-ui/tailwind";
 
export default {
  darkMode: ["class"],
  plugins: [veloriaPlugin],
};
04

Wrap with VeloriaProvider

js
// app/layout.tsx
import { VeloriaProvider } from "veloria-ui/provider";
 
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <VeloriaProvider>{children}</VeloriaProvider>
      </body>
    </html>
  );
}

Start building today

Install Veloria UI and go from blank canvas to production-ready interface in minutes, not days.

Read the docsBrowse components

MIT License · Free forever · Built by JohnDev19