paukraft UI
A collection of high-quality, reusable components built with Shadcn principles that I build for my own projects
Comparison Slider
A slider component that allows comparison between two elements with a draggable divider.
✅ Early Returns
const getUserStatus = (user: User) => {
if (!user.isActive) return 'inactive'
if (!user.hasVerifiedEmail) return 'unverified'
if (!user.hasPremium) return 'active'
return 'premium'
}❌ Nested Conditionals
const getUserStatus = (user: User) => {
if (user.isActive) {
if (user.hasVerifiedEmail) {
if (user.hasPremium) {
return 'premium'
} else {
return 'active'
}
} else {
return 'unverified'
}
} else {
return 'inactive'
}
}Copy Button
A button that copies text to clipboard with animated feedback using animated icons.
Invite Friends
Share this exclusive code with friends to unlock special rewards
FRIEND-2024-SPRINGSeeded Avatar
A customizable avatar component that generates consistent avatars based on a seed value, with built-in dark mode support. Originally from avvvatars.com.
Message Thread
Hey team, how's the project coming along?
Making good progress! Will update soon.
Team Members
Alex Martinez
Product Designer
Jessica Chen
Frontend Developer
All Variants & Sizes
Character Variant
Marble Variant
Shape Variant
User Variant
Skeleton Plus
Improved shadcn/ui skeleton with added text-based sizing support (text-sm, text-lg etc)