Shadcn UI Components Guide

Using Prebuilt Components

Shadcn UI prebuilt components se fast aur consistent UI build karna easy hai, scalable aur responsive design ke liye perfect hai.

import { Button } from "@/components/ui/button"

export default function App() {
  return <Button variant="primary">Click Me</Button>
}

Customizing Theme

Theme customization se colors, fonts aur shadows easily app ke branding ke saath match hote hain.

import { Button } from "@/components/ui/button"

export default function App() {
  return <Button className="bg-blue-500 text-white">Custom Button</Button>
}

Responsive Layouts

Shadcn UI responsive utilities se layouts mobile aur desktop dono ke liye automatically adjust hote hain.

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div className="p-4 bg-gray-100">Card One</div>
  <div className="p-4 bg-gray-200">Card Two</div>
  <div className="p-4 bg-gray-300">Card Three</div>
</div>

Forms and Validation

Shadcn UI input components forms build karne aur validation integrate karne me easy aur user-friendly banate hain.

import { Input } from "@/components/ui/input"

export default function LoginForm() {
  return <Input placeholder="Enter your email" />
}

Modals and Dialogs

Modals aur dialogs interactive messages aur confirmations ke liye use hote hain, user engagement enhance karte hain.

import { Dialog, DialogContent } from "@/components/ui/dialog"

export default function App() {
  return (
    <Dialog open={true}>
      <DialogContent>Modal Content Here</DialogContent>
    </Dialog>
  )
}

Tables for Data Display

Shadcn UI tables structured data display karne ke liye simple aur responsive solution provide karte hain.

import { Table, TableRow, TableCell } from "@/components/ui/table"

export default function DataTable() {
  return (
    <Table>
      <TableRow>
        <TableCell>Name</TableCell>
        <TableCell>Age</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Ali</TableCell>
        <TableCell>25</TableCell>
      </TableRow>
    </Table>
  )
}

Dropdowns and Selects

Dropdown components se user-friendly selection interfaces create hote hain, forms aur menus me use hota hai.

import { Select, SelectItem } from "@/components/ui/select"

export default function App() {
  return (
    <Select>
      <SelectItem value="option1">Option One</SelectItem>
      <SelectItem value="option2">Option Two</SelectItem>
    </Select>
  )
}

Notifications and Toasts

Notifications aur toasts user ko important updates aur feedback provide karte hain, engagement improve karte hain.

import { toast } from "@/components/ui/use-toast"

toast({ title: "Success", description: "Action completed successfully" })

Tabs for Content Organization

Tabs content organize karte hain aur user easily sections switch kar sakta hai, UI interactive aur neat hota hai.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

export default function App() {
  return (
    <Tabs defaultValue="first">
      <TabsList>
        <TabsTrigger value="first">Tab One</TabsTrigger>
        <TabsTrigger value="second">Tab Two</TabsTrigger>
      </TabsList>
      <TabsContent value="first">Content One</TabsContent>
      <TabsContent value="second">Content Two</TabsContent>
    </Tabs>
  )
}

Animations and Transitions

Shadcn UI animations aur transitions interactive UI aur smooth visual feedback provide karte hain.

import { motion } from "framer-motion"

export default function App() {
  return (
    <motion.div animate={{ scale: 1.2 }} transition={{ duration: 0.5 }}>
      Hover Me
    </motion.div>
  )
}