🎨 shadcn/ui Components Collection

A curated collection of 6 beautiful, accessible, and reusable components built with React, TypeScript, and Tailwind CSS. Each component includes live interactive previews and copy-paste ready code examples.

✨ Features

• 🎯 6 Production-Ready Components: Interactive Card, Pricing Card, Statistics Card, Testimonial Card, Feature Card, Blog Card
• 🔧 Full TypeScript Support: Complete type definitions with IntelliSense
• 📱 Responsive Design: Mobile-first approach with responsive layouts
• ♿ Accessible: Built with ARIA attributes and keyboard navigation
• 🎨 Highly Customizable: Easy to customize with Tailwind CSS and component props
• 🚀 Performance Optimized: Tree-shakeable exports and minimal bundle impact
• 📋 Copy-Paste Ready: One-click code copying with complete examples
• 🔄 Live Previews: Interactive component demonstrations
• 📖 Comprehensive Documentation: JSDoc comments and prop tables

🚀 Quick Start

1. Clone the repository:

git clone https://github.com/tahmidbintaslim/shadcn-ui-library.git
cd shadcn-ui-library

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open your browser:

Visit http://localhost:3000 to explore the component library.

📦 Available Components

⚡ Interactive Card

A beautiful card component with hover effects, animations, and flexible content layout.

Key Features:

• Customizable hover animations
• Badge support with multiple variants
• Flexible content areas
• Click handlers and actions

import { InteractiveCard } from "@/components/custom/interactive-card";

<InteractiveCard
  title="Product Launch"
  description="Join us for the biggest tech event of the year!"
  badge="Live"
  badgeVariant="destructive"
  hoverEffect={true}
  actionText="Register Now"
  onAction={() => alert("Registration clicked!")}
/>;

💰 Pricing Card

Professional pricing cards with features list, call-to-action buttons, and responsive design.

Key Features:

• Popular plan highlighting
• Feature lists with included/excluded items
• Flexible pricing display
• Custom CTA buttons

import { PricingCard } from "@/components/custom/pricing-card";

<PricingCard
  name="Pro Plan"
  description="Perfect for growing teams"
  price={29}
  currency="$"
  period="month"
  features={[
    { text: "Unlimited projects", included: true },
    { text: "Priority support", included: true },
    { text: "Advanced analytics", included: true },
    { text: "Custom integrations", included: false },
  ]}
  ctaText="Start Free Trial"
  popular={true}
  onSelect={() => alert("Plan selected!")}
/>;

📈 Statistics Card

Display key metrics and statistics with beautiful icons and trend indicators.

Key Features:

• Trend indicators (up/down/neutral)
• Custom icons with colors
• Formatted number display
• Responsive layouts

import { StatisticsCard } from "@/components/custom/statistics-card";
import { DollarSign } from "lucide-react";

<StatisticsCard
  title="Total Revenue"
  value={45231}
  prefix="$"
  change={20.1}
  changePeriod="from last month"
  icon={DollarSign}
  iconColor="text-green-600"
/>;

💬 Testimonial Card

Beautiful testimonial cards with ratings, user avatars, and authentic customer feedback.

Key Features:

• 5-star rating system
• Avatar support with fallbacks
• Multiple card variants
• Quote styling

import { TestimonialCard } from "@/components/custom/testimonial-card";

<TestimonialCard
  testimonial="This component library has saved our team countless hours!"
  author="Alex Chen"
  role="Frontend Developer"
  company="InnovateTech"
  rating={5}
  variant="elevated"
/>;

💡 Feature Card

Showcase product features with icons, descriptions, and call-to-action elements.

Key Features:

• Vertical and horizontal layouts
• Custom icon backgrounds
• Badge support
• Hover animations

import { FeatureCard } from "@/components/custom/feature-card";
import { BarChart3 } from "lucide-react";

<FeatureCard
  title="Advanced Analytics"
  description="Get detailed insights with our powerful analytics dashboard"
  icon={BarChart3}
  iconColor="text-blue-600"
  iconBg="bg-blue-100"
  badge="Popular"
  ctaText="Explore Analytics"
  onCtaClick={() => alert("Analytics clicked!")}
  hoverEffect={true}
/>;

📖 Blog Card

Perfect for blog posts, articles, and news content with images, metadata, and multiple layout variants.

Key Features:

• Multiple layout variants (default, horizontal, minimal)
• Rich metadata support
• Category tags
• Like counters and read time

import { BlogCard } from "@/components/custom/blog-card";

<BlogCard
  title="Building Modern UI Components"
  excerpt="Learn how to create beautiful, reusable UI components..."
  author="Sarah Wilson"
  date="2024-01-15"
  readTime="8 min read"
  category="React"
  categoryColor="bg-blue-100 text-blue-800"
  likes={127}
  variant="default"
/>;

🎨 Customization

All components are built with Tailwind CSS and can be easily customized using the className prop:

<InteractiveCard
  title="Custom Styled Card"
  description="This card has custom styling"
  className="bg-gradient-to-r from-blue-500 to-purple-600 text-white border-0"
  hoverEffect={true}
/>

Component Props

Each component accepts a comprehensive set of props for customization:

• Styling: className, variant-specific props
• Content: titles, descriptions, custom content areas
• Interactions: click handlers, hover effects
• Accessibility: ARIA labels, keyboard navigation
• Theming: color variants, size options

🏗️ Project Structure

src/
├── app/
│   ├── components/          # Components showcase page
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx           # Homepage
└── components/
    ├── custom/            # Custom component library
    │   ├── interactive-card/
    │   ├── pricing-card/
    │   ├── statistics-card/
    │   ├── testimonial-card/
    │   ├── feature-card/
    │   ├── blog-card/
    │   └── index.ts       # Component exports
    └── ui/               # Base shadcn/ui components

🚀 Production Deployment

This project is optimized for deployment on Vercel, Netlify, or any modern hosting platform:

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Deploy automatically - Vercel will detect Next.js and configure everything

Manual Deployment

# Build the project
npm run build

# Start production server
npm start

Environment Variables

No environment variables required for basic functionality.

🧪 Development

Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Adding New Components

1. Create a new directory in src/components/custom/
2. Create the component file with TypeScript interfaces
3. Add comprehensive JSDoc documentation
4. Export from index.ts
5. Add to the showcase page

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-component)
3. Add your component following the existing patterns
4. Include documentation and examples
5. Test thoroughly
6. Submit a pull request

Component Guidelines

• Use TypeScript with comprehensive interfaces
• Include JSDoc documentation
• Follow accessibility best practices
• Add multiple usage examples
• Ensure responsive design

📊 Performance

• Bundle Size: Optimized with tree-shaking
• Runtime: React 19 with concurrent features
• Build Time: Enhanced with Turbopack
• SEO: Next.js with proper metadata

🔧 Tech Stack

• Framework: Next.js 15.3.5
• Language: TypeScript 5.0
• Styling: Tailwind CSS 4.0
• UI Primitives: Radix UI
• Icons: Lucide React
• Build: Turbopack

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui for the foundational component system
• Radix UI for accessible primitives
• Tailwind CSS for utility-first styling
• Lucide React for beautiful icons
• Next.js for the React framework

🌟 Support

If you find this project helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting new components
• 🔄 Contributing code

---

Made with ❤️ by the open-source community

Ready to build amazing UIs? Get started now!