NexitUI

NexitUI는 shadcn/ui를 기반으로 구축된 종합적인 컴포넌트 라이브러리로, HeroUI에서 영감받은 애니메이션과 자연스러운 마이크로 인터랙션을 특징으로 합니다. 부드러운 애니메이션, 다양한 컬러 버리언트, 그리고 뛰어난 개발자 경험을 갖춘 아름답게 디자인된 다양한 컴포넌트를 제공합니다.

Features

• 🎨 Multiple Color Variants: Each component comes with primary, secondary, success, warning, danger, and more color options
• ✨ Smooth Animations: Natural animations using Framer Motion with Apple-inspired easing curves
• 🎭 Interactive Elements: Ripple effects, hover states, and micro-interactions
• 🎯 Accessibility: Built with accessibility in mind using Radix UI primitives
• 🌙 Dark Mode: Full dark mode support with automatic theme switching
• 📱 Responsive: Mobile-first design that works on all screen sizes
• 🛠️ Customizable: Highly customizable with CSS variables and Tailwind CSS
• 🚀 Performance: Optimized for performance with lazy loading and efficient animations

Philosophy

NexitUI follows the principle of "animation should feel natural, not distracting." Every animation is carefully crafted to enhance the user experience without overwhelming the interface. The components are designed to be:

• Consistent: Unified design language across all components
• Intuitive: Familiar interaction patterns that users expect
• Delightful: Subtle animations that bring joy to everyday interactions
• Professional: Suitable for both consumer and enterprise applications

Animation System

All animations in NexitUI use carefully tuned easing curves:

• Apple Easing: [0.4, 0.0, 0.2, 1] - Used for most interactions
• Toss Easing: [0.25, 0.1, 0.25, 1] - Smooth, natural feeling
• Bounce: [0.68, -0.55, 0.265, 1.55] - Playful bounce effect
• Entrance: [0.0, 0.0, 0.2, 1] - Smooth entrances
• Exit: [0.4, 0.0, 1, 1] - Quick exits

Color System

NexitUI provides multiple color variants for each component:

Primary Colors

• Primary: Blue-based primary color
• Secondary: Purple-based secondary color
• Success: Green for positive actions
• Warning: Yellow for caution
• Danger: Red for destructive actions

Variant Types

• Solid: Full color background with white text
• Flat: Muted background with colored text
• Outline: Transparent background with colored border
• Ghost: Transparent background with colored text
• Gradient: Beautiful gradient backgrounds
• Glass: Semi-transparent with backdrop blur

Getting Started

All components are built with TypeScript and include full type definitions. They work seamlessly with:

• Next.js (App Router)
• React 18+
• Tailwind CSS
• Framer Motion
• Radix UI

Customization

Every component accepts standard HTML attributes and can be customized using:

• CSS classes via the className prop
• CSS variables for colors and spacing
• Component-specific props for behavior
• Animation controls via disableAnimation prop

Ready to build beautiful interfaces? Let's get started with the components!