Whoa UI

🌐 ・Project Links

• Github

❓・Why this project?

Whoa UI was born from the desire to have a library of reusable, modern and animated components to accelerate the development of web interfaces with React. I needed elegant, consistent and easy-to-integrate components for different projects, while maintaining great customization flexibility. This project also allows me to share robust UI solutions with the community and centralize my best practices in design and animation.

🛠️・Technologies used

• React: The foundation of the library for creating dynamic and modular components.
• TypeScript: For typing robustness and security during development.
• shadcn/ui: To benefit from a collection of accessible and styled components.
• TailwindCSS: For fast, responsive and easily customizable design.
• Framer Motion: To add smooth and modern animations to each component.

📦・Available components

Interface components

• Button: Buttons with variants (primary, secondary, outline) and hover/focus animations
• Input: Input fields with validation and error states
• Card: Styled containers with hover effects and animations
• Modal: Modal dialogs with appear/disappear animations
• Tooltip: Contextual tooltips with intelligent positioning

Navigation components

• Navbar: Responsive navigation bar with mobile menu
• Breadcrumb: Breadcrumb for hierarchical navigation
• Pagination: Page navigation with visual indicators
• Tabs: Interactive tabs with smooth transitions

Data components

• Table: Responsive tables with sorting and filtering
• Chart: Animated charts for data visualization
• Progress: Progress bars with animations
• Badge: Colored labels for status and categories

⚡・Key features

🎨 Design System

• Design tokens: Consistent colors, spacing and typography
• Dark/light mode: Native theme support with smooth transition
• Responsive: Automatic adaptation on all screens
• Accessibility: WCAG 2.1 compliance with appropriate ARIA attributes

🚀 Performance

• Tree shaking: Selective import to reduce bundle size
• Lazy loading: Deferred loading of non-critical components
• Optimization: Animations optimized for 60fps
• SSR Ready: Compatible with Next.js and other SSR frameworks

🛠️ Developer Experience

• TypeScript: Complete type definitions for IntelliSense
• Storybook: Interactive documentation and visual tests
• Jest & React Testing Library: Complete test coverage
• Simple API: Easy customization of themes and variants

📚・Installation and usage

# Installation via npm
npm install @whoa-studio/ui

# Installation via yarn
yarn add @whoa-studio/ui

import { Button, Card, Input } from "@whoa-studio/ui";

function App() {
	return (
		<Card className="p-6">
			<h2>Usage example</h2>
			<Input placeholder="Your name" />
			<Button variant="primary" size="lg">
				Submit
			</Button>
		</Card>
	);
}

🎯・Roadmap

Coming soon