Access 600+ Components 🎨

Indie Kit is built on shadcn/ui, giving you access to a massive ecosystem of beautiful, customizable components! ✨

What is shadcn/ui? 🤔

shadcn/ui is not a traditional component library. Instead of installing packages, you copy the code directly into your project. This means:

• ✅ Full Control: Components live in your codebase - modify them however you want
• ✅ No Dependencies: No bloated node_modules from component libraries
• ✅ Easy Customization: Change styles, behavior, or structure as needed
• ✅ Type Safe: Built with TypeScript for better developer experience
• ✅ Accessible: All components follow accessibility best practices

Community Components 🚀

Beyond the official shadcn/ui components, there's a thriving community creating amazing additions!

21st.dev - 600+ Premium Components

Visit 21st.dev to explore:

• 🎨 UI Elements: Buttons, cards, modals, dropdowns
• 📱 Mobile Components: Touch-optimized mobile interfaces
• 🖥️ Dashboard Layouts: Admin panels and analytics views
• 🎯 Marketing Sections: Hero sections, features, pricing tables
• 📈 Charts & Graphs: Data visualization components
• 🔒 Authentication: Login forms, signup flows, OAuth buttons
• 💳 Payment Forms: Stripe-ready checkout components
• 📊 Tables: Advanced data tables with sorting and filtering
• 🎭 Animations: Beautiful transitions and effects
• 📝 Forms: Complex form layouts and validation

How to Install Components 💡

Step 1: Find a Component

1. Browse shadcn/ui or 21st.dev
2. Find the component you want to use
3. Click on it to see the installation command

Step 2: Install with pnpm

Most components will show an npx command, but since Indie Kit uses pnpm, use this instead:

pnpm dlx shadcn@latest add [component-name]

Examples:

# Add a calendar component
pnpm dlx shadcn@latest add calendar

# Add a data table
pnpm dlx shadcn@latest add table

# Add a chart
pnpm dlx shadcn@latest add chart

Step 3: Import and Use

After installation, import the component in your page or component:

import { Calendar } from "@/components/ui/calendar";

export default function MyPage() {
  return (
    <div>
      <Calendar />
    </div>
  );
}

Practical Examples 📝

Adding a Date Picker

# Install calendar component
pnpm dlx shadcn@latest add calendar

"use client";

import { Calendar } from "@/components/ui/calendar";
import { useState } from "react";

export default function BookingPage() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center p-8">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="rounded-md border"
      />
    </div>
  );
}

Adding a Data Table

# Install table component
pnpm dlx shadcn@latest add table

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export default function UsersPage() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>John Doe</TableCell>
          <TableCell>john@example.com</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Adding Charts

# Install chart component
pnpm dlx shadcn@latest add chart

import { Bar, BarChart } from "recharts";
import { ChartContainer } from "@/components/ui/chart";

const data = [
  { month: "Jan", revenue: 4000 },
  { month: "Feb", revenue: 3000 },
  { month: "Mar", revenue: 5000 },
];

export default function AnalyticsPage() {
  return (
    <ChartContainer config={{}}>
      <BarChart data={data}>
        <Bar dataKey="revenue" fill="#8884d8" />
      </BarChart>
    </ChartContainer>
  );
}

Where Components Are Installed 📁

When you run the install command, components are added to:

src/
  components/
    ui/
      calendar.tsx     ← Your new component
      table.tsx
      chart.tsx
      ...

Customizing Components 🎨

Since the code is in your project, you can customize anything:

Change Colors

// Edit src/components/ui/button.tsx
<button className="bg-blue-500 hover:bg-blue-600">
  Click me
</button>

Modify Behavior

// Add custom logic
const handleClick = () => {
  // Your custom behavior
  console.log("Button clicked!");
};

Add Props

// Extend component props
interface CustomButtonProps extends ButtonProps {
  icon?: React.ReactNode;
}

Best Practices 💡

1. Start with Pre-installed Components: Check what Indie Kit already includes before adding new ones
2. Install Only What You Need: Don't bloat your codebase with unused components
3. Customize After Installation: Modify components to match your brand
4. Keep Components Organized: Group related components in logical folders
5. Document Custom Changes: Add comments if you heavily modify a component

Troubleshooting 🔧

"Command not found"

• Make sure you have pnpm installed: npm install -g pnpm
• Use pnpm dlx instead of npx

"Component not working"

• Check if all dependencies are installed: pnpm install
• Verify imports are correct
• Make sure Tailwind CSS is configured properly

"Styling looks wrong"

• Check your tailwind.config.ts includes the component paths
• Verify your globals.css has the required CSS variables
• Try clearing your build cache: pnpm run build

Explore More Resources 🌐

• shadcn/ui Official Docs
• 21st.dev Component Library
• Pre-installed Components
• Theme Customization

Start exploring and build something amazing! ✨