What is Visual UI?
A modern, production-ready React component library that combines the power of Material UI with the beautiful aesthetics of Canva. Built with TypeScript, Tailwind CSS, and Framer Motion.
Lightning Fast
Built with performance in mind. Optimized components with minimal re-renders and efficient rendering.
Beautiful Design
Inspired by Material UI with Canva aesthetics. Modern, clean, and visually stunning components.
Developer Friendly
Intuitive API, comprehensive TypeScript support, and excellent documentation for seamless integration.
Fully Responsive
Every component is mobile-first and responsive out of the box. Looks great on all screen sizes.
Dark Mode Ready
Built-in dark mode support with smooth transitions. Automatically adapts to user preferences.
50+ Components
Comprehensive library covering inputs, data display, navigation, feedback, and layout components.
Our Philosophy
We believe that great UI components should be both powerful and delightful. VUI is designed to give developers the tools they need to build beautiful applications quickly, without sacrificing flexibility or performance. Every component is crafted with care, tested thoroughly, and documented extensively to ensure the best developer experience.
Installation
Get started with vui in minutes. Install the package and configure your project.
Quick Install
Choose your preferred package manager:
npm install @vui/materialPeer Dependencies
VUI requires these packages to be installed in your project:
npm install react react-dom framer-motion tailwindcssConfigure Tailwind CSS
Update your Tailwind configuration to include VUI components and the Visual UI color palette:
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@vui/material/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
},
// Add other VUI colors as needed
},
},
},
plugins: [],
};
export default config;Note: Make sure to add the vui package path to the content array so Tailwind can purge unused styles correctly.
Theme Provider (Optional)
For dark mode support, wrap your app with a theme provider:
// app/layout.tsx
import { ThemeProvider } from '@vui/material';
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider defaultPrimaryColor="purple">
{children}
</ThemeProvider>
</body>
</html>
);
}Usage Example
Start building with vui components. Import what you need and start creating beautiful interfaces.
Code
import { Button, Card, CardBody } from "@vui/material";
export default function Example() {
return (
<Card variant="elevated">
<CardBody>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
Hello VUI
</h3>
<p className="text-sm text-neutral-600 dark:text-neutral-400 mt-2">
This is a simple example using Button and Card components.
</p>
<Button className="mt-4" variant="contained">
Click Me
</Button>
</CardBody>
</Card>
);
}Preview
Hello VUI
This is a simple example using Button and Card components.
Import Components
All vui components are exported from a single entry point for convenience:
// Import individual components
import { Button, Card, TextField } from '@vui/material';
// Import icons
import { IconHome, IconUser, IconSettings } from '@vui/material/icons';
// Import animations
import { FadeIn, SlideIn, ScaleIn } from '@vui/material';Component Features
Every VUI component comes with powerful features out of the box:
TypeScript Support
Full type definitions and IntelliSense support
Dark Mode Ready
Automatic dark mode support with Tailwind
Customizable
Extend with className and custom props
Accessible
ARIA attributes and keyboard navigation
Ready to build?
Explore all 50 components in the component showcase and start building amazing interfaces.
Core Principles
vui is built on three foundational principles that guide every decision we make.
Consistency
Every component follows the same design patterns and principles, ensuring a cohesive user experience across your application.
Accessibility
Built with accessibility in mind, featuring proper ARIA attributes, keyboard navigation, and screen reader support.
Performance
Optimized for speed with tree-shakeable exports, minimal bundle size, and efficient rendering powered by React and Framer Motion.
What makes vui special?
A comprehensive set of features designed for modern web development
Component Showcase
See VUI components in action. Each demo includes both the live preview and source code.
Preview
Variants
Sizes
With Icons
Special Features
Code
import { Button } from '@vui/material';
import { Download, ArrowRight, Sparkles } from 'lucide-react';
export default function Demo() {
return (
<div className="space-y-6">
{/* Variants */}
<div className="flex flex-wrap gap-3">
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>
<Button variant="gradient">Gradient</Button>
</div>
{/* Sizes */}
<div className="flex flex-wrap items-center gap-3">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div>
{/* With Icons */}
<div className="flex flex-wrap gap-3">
<Button
variant="contained"
leftIcon={<Download className="w-4 h-4" />}
>
Download
</Button>
<Button
variant="outlined"
rightIcon={<ArrowRight className="w-4 h-4" />}
>
Continue
</Button>
<Button
variant="gradient"
leftIcon={<Sparkles className="w-4 h-4" />}
glow
>
Get Started
</Button>
</div>
{/* Special Features */}
<div className="space-y-3">
<Button variant="contained" isLoading>
Loading...
</Button>
<Button variant="outlined" fullWidth>
Full Width Button
</Button>
<Button variant="contained" disabled>
Disabled
</Button>
</div>
</div>
);
}Want to see all 50+ components in action?
Dark Mode & Theming
VUI supports dark mode out of the box. All components automatically adapt to your theme preference.
Try it yourself
Toggle between light and dark mode to see how components adapt:
Light Mode
Card component
Dark Mode
Card component
Theme Provider Setup
Create a theme provider to manage light/dark mode across your app:
'use client';
import React, { createContext, useContext, useEffect, useState } from 'react';
type Theme = 'light' | 'dark' | 'system';
interface ThemeContextType {
theme: Theme;
setTheme: (theme: Theme) => void;
resolvedTheme: 'light' | 'dark';
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>('system');
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
useEffect(() => {
const root = window.document.documentElement;
const isDark = theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
root.classList.toggle('dark', isDark);
setResolvedTheme(isDark ? 'dark' : 'light');
}, [theme]);
return (
<ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
{children}
</ThemeContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme must be used within ThemeProvider');
return context;
};Using the Theme
Use the theme hook to create theme toggles in your components:
import { useTheme, Button, Switch } from '@vui/material';
import { Sun, Moon } from 'lucide-react';
export default function ThemeToggle() {
const { theme, setMode } = useTheme();
return (
<div>
{/* Simple Toggle */}
<Switch
checked={theme.mode === 'dark'}
onChange={() => setMode(theme.mode === 'dark' ? 'light' : 'dark')}
label="Dark Mode"
/>
{/* Button Toggle */}
<Button
variant="outlined"
onClick={() => setMode(theme.mode === 'dark' ? 'light' : 'dark')}
>
{theme.mode === 'dark' ? <Sun /> : <Moon />}
</Button>
</div>
);
}Dark Mode Classes
All vui components support Tailwind's dark: prefix for custom styling:
<Card className="bg-white dark:bg-neutral-900">
<CardBody>
<h3 className="text-neutral-900 dark:text-white">
This text adapts to theme
</h3>
<p className="text-neutral-600 dark:text-neutral-400">
So does this description
</p>
</CardBody>
</Card>Tip: All Visual UI color classes (v-purple, v-blue, etc.) have dark mode variants built-in for consistent theming.
Light Mode
Clean and bright interface
Dark Mode
Easy on the eyes
System
Follows OS preference