Browse Components
Buttons
8 componentsAction buttons, icon buttons, social buttons, and button groups
Cards
11 componentsProduct cards, profile cards, pricing cards, and testimonial cards
Lists
5 componentsTimeline lists, todo lists, feed lists, and notification lists
Inputs
6 componentsText inputs, select menus, checkboxes, and radio buttons
Modals
8 componentsModal dialogs, popups, and tooltips
Tabs
3 componentsTab components, tab navigation, and tab content
Featured Components
Primary Button
React + TailwindStandard button component with different states and variants. Includes hover, focus, and disabled states.
Animated Button
React + TailwindModern animated buttons with various effects including slide, glow, pulse, and bounce animations.
Menu Button
React + TailwindInteractive menu buttons with hamburger and dropdown variants. Features smooth animations and customizable menu items.
Card Title
This is a sample card description that showcases the basic card layout.
Basic Card
React + TailwindSimple and elegant card for displaying content. Perfect for blog posts, articles, or product information.
Premium Watch
$299Elegant timepiece with premium materials and sophisticated design.
Product Card
React + TailwindModern e-commerce product card with image, pricing, ratings, and interactive elements like wishlist and cart actions.
Sarah Anderson
Senior Software Engineer
Building beautiful user interfaces with React and Tailwind CSS. Open source enthusiast and community builder.
Profile Card
React + TailwindProfessional profile card with avatar, stats, social links and follow button. Perfect for social networks and team member showcases.
"The attention to detail and the user experience is outstanding. This product has completely transformed how we handle our daily operations. Highly recommended!"
Testimonial Card
React + TailwindElegant testimonial card featuring customer reviews with ratings, profile picture and company information. Perfect for showcasing user feedback and reviews.
The Future of Web Development: What's Next?
Explore the latest trends and technologies shaping the future of web development, from WebAssembly to Edge Computing.
Blog Card
React + TailwindModern blog card with cover image, category tags, reading time, author info and social interactions. Perfect for blog posts and articles.
Pro
Ideal for growing businesses and teams
Pricing Card
React + TailwindModern pricing card with features list, badges, and hover animations. Perfect for SaaS and subscription-based services.
Notification Card
React + TailwindInteractive notification card with different types, actions and animations. Perfect for alerts, messages and system notifications.
Total Users
2,847
+12.5%Last 30 days
Dashboard Card
React + TailwindModern dashboard card with statistics, trends and mini charts. Perfect for analytics and admin dashboards.
Project_Proposal.pdf
File Card
React + TailwindModern file card with thumbnail, actions and menu. Perfect for file management and sharing.
Event Card
React + TailwindModern event card with registration, calendar integration and attendee list. Perfect for conferences and meetups.
Performance Master
Optimize app performance by 50% or more
Achievement Card
React + TailwindInteractive achievement card with animations and progress tracking. Perfect for gamification and reward systems.
Project Kickoff Meeting
Initial meeting with the design team to discuss project requirements and timeline.
Design System Updates
Updated color palette and typography guidelines in the design system.
Critical Security Patch
Urgent security update required for the authentication system.
User Research Tasks
Complete user interviews and compile feedback for the new feature.
Timeline List
React + TailwindInteractive timeline list with status indicators and activity types. Perfect for project updates and activity feeds.
Tasks
Update user authentication flow
Design new landing page mockups
Fix responsive layout issues
Write API documentation
Todo List
React + TailwindInteractive todo list with priority, due date, tags and actions. Perfect for task management and productivity.
Sarah Wilson
Just launched our new design system! 🎨 Check out the documentation and let me know what you think.
Alex Thompson
Here's a sneak peek of our new dashboard interface. Built with React and Tailwind CSS. What do you think? 👀
Emily Parker
Excited to announce that we've hit 10k users! 🎉 Thank you all for your amazing support. Here's to the next milestone! 🚀
Feed List
React + TailwindInteractive feed list with user info, actions and stats. Perfect for social media and news feeds.
This is a great improvement to the design system! The new color palette really helps with accessibility.
Agreed! The contrast ratios are much better now.
Could we add more examples of component usage in different contexts? That would be really helpful for new team members.
Good point! I can help with adding more examples from our recent projects.
The new animation guidelines are fantastic. Really helps maintain consistency across different interactions.
Comment List
React + TailwindInteractive comment list with voting, replies and actions. Perfect for social media and blog comments.
Hey! I just checked out your design system. Great work!
Alex Thompson liked your post about design patterns
Emily Parker started following you
David Kim mentioned you in a comment
Your storage is almost full. Please upgrade your plan.
Notification List
React + TailwindInteractive notification list with status indicators and actions. Perfect for user notifications and alerts.
We'll never share your email with anyone else.
Text Input
React + TailwindCustomizable text input with support for icons, validation states, and helper text.
Choose your preferred JavaScript framework
Select Menu
React + TailwindCustomizable select menu with support for single and multiple selection, search, and grouping.
Get notified when someone mentions you in a comment
Get notified when someone sends you a message
Get notified when someone follows you
Checkbox
React + TailwindCustomizable checkbox input with support for groups, custom styles, and indeterminate state.
Enable automatic updates to keep your application secure
Toggle Switch
React + TailwindCustomizable toggle switch with different sizes, colors, and states.
Please select a valid date
Date Input
React + TailwindCustomizable date input with calendar picker, time selection, and range support.
Choose how you want to receive notifications
Radio Group
React + TailwindCustomizable radio group with different layouts, sizes, and styles.
Basic Modal
React + TailwindA simple modal dialog with title and close button.
Custom Modal
React + TailwindA beautifully designed custom modal with icon and centered content.
Status Modal
React + TailwindA modal dialog for displaying success or error status.