UI Components in Shadcn Ui library

Shadcn/Ui Component #1

import { Gauge, Download } from "lucide-react"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

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

export function Header1() {
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 bg-secondary">
            <CardHeader className="flex-row flex-wrap gap-6">
                <div className="hidden md:flex items-center justify-center w-16 h-16 bg-secondary border rounded-md">
                    <Gauge />
                </div>
                <div>
                    <CardTitle className="text-2xl">Analytics Dashboard</CardTitle>
                    <CardDescription className="text-sm">Monitor key metrics, check reporting and review insights</CardDescription>
                </div>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <Button variant="outline" size="sm" className="text-xs">
                    <Download/> Download
                </Button>
                <Button variant="outline" size="sm" className="text-xs">Settings</Button>
                <Button size="sm" className="text-xs">Download Report</Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #2

shadcn/ui

Dashboard

import { Gauge, Download } from "lucide-react"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

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

export function Header2() {
  return (
    <div>
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 border-0 shadow-none">
            <CardHeader className="flex-row flex-wrap gap-6">
                <div className="hidden md:flex items-center justify-center w-16 h-16 bg-secondary rounded-md">
                    <Gauge />
                </div>
                <div>
                    <CardTitle className="text-2xl">Analytics Dashboard</CardTitle>
                    <CardDescription className="text-sm">Monitor key metrics, check reporting and review insights</CardDescription>
                </div>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <Button variant="secondary" size="sm" className="text-xs">
                    <Download/> Download
                </Button>
                <Button variant="secondary" size="sm" className="text-xs">Settings</Button>
                <Button size="sm" className="text-xs">Download Report</Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #3

shadcn/ui

Dashboard

import { SquarePlus } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Search } from 'lucide-react'
import { Input } from "@/components/ui/input"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

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

export function Header3() {
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 bg-secondary rounded-none">
            <CardHeader className="flex-row flex-wrap items-center justify-between gap-4 space-y-0">
                <CardTitle className="text-xl">Project Name</CardTitle>
                <Badge className="text-xs font-medium">56 Total</Badge>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <div className="relative">
                    <Input
                        type="search"
                        placeholder="Type to search...."
                        className="pr-8 w-full"
                    />
                    <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                </div>
                <Button size="sm" className="text-xs">
                    <SquarePlus />Add Project
                </Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #4

shadcn/ui

Dashboard

import { SquarePlus } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Search } from 'lucide-react'
import { Input } from "@/components/ui/input"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

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

export function Header4() {
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 rounded-none">
            <CardHeader className="flex-row flex-wrap items-center justify-between gap-4 space-y-0">
                <CardTitle className="text-xl">Project Name</CardTitle>
                <Badge className="text-xs font-medium">56 Total</Badge>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <div className="relative">
                    <Input
                        type="search"
                        placeholder="Type to search...."
                        className="pr-8 w-full"
                    />
                    <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                </div>
                <Button size="sm" className="text-xs">
                    <SquarePlus />Add Project
                </Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #5

shadcn/ui

Dashboard

import { SquarePlus } from "lucide-react"
import { Search, Ellipsis, Briefcase } from 'lucide-react'
import { Input } from "@/components/ui/input"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

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

export function Header5() {
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 bg-secondary rounded-none">
            <CardHeader className="flex-row flex-wrap gap-6">
                <div className="hidden md:flex items-center justify-center w-16 h-16 bg-secondary border rounded-md">
                    <Briefcase className="w-8 h-8" />
                </div>
                <div>
                    <CardTitle className="mb-1 text-xl">Project Name</CardTitle>
                    <CardDescription className="text-sm">42 users involved in this product</CardDescription>
                </div>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <div className="relative">
                    <Input
                        type="search"
                        placeholder="Type to search...."
                        className="pr-8 w-full"
                    />
                    <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                </div>
                <Button size="sm" className="text-xs">
                    <SquarePlus /> Add Task
                </Button>
                <Button variant="outline" size="icon">
                    <Ellipsis />
                </Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #6

shadcn/ui

Dashboard

import { SquarePlus } from "lucide-react"
import { Search, Ellipsis, Briefcase } from 'lucide-react'
import { Input } from "@/components/ui/input"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

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

export function Header6() {
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 rounded-none">
            <CardHeader className="flex-row flex-wrap gap-6">
                <div className="hidden md:flex items-center justify-center w-16 h-16 bg-secondary border rounded-md">
                    <Briefcase className="w-8 h-8" />
                </div>
                <div>
                    <CardTitle className="mb-1 text-xl">Project Name</CardTitle>
                    <CardDescription className="text-sm">42 users involved in this product</CardDescription>
                </div>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <div className="relative">
                    <Input
                        type="search"
                        placeholder="Type to search...."
                        className="pr-8 w-full"
                    />
                    <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                </div>
                <Button size="sm" className="text-xs">
                    <SquarePlus /> Add Task
                </Button>
                <Button variant="secondary" size="icon">
                    <Ellipsis />
                </Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #7

shadcn/ui

Dashboard

'use client';

import * as React from "react"
import { CalendarIcon, House, ChartNoAxesColumn, Download, ChevronDown } from "lucide-react"
import { format } from "date-fns"
import { Calendar } from "@/components/ui/calendar"
import { Button } from "@/components/ui/button";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"

export function Header7() {
    const [fromDate, setFromDate] = React.useState()
    const [toDate, setToDate] = React.useState()
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 rounded-none bg-secondary">
            <CardHeader>
                <CardTitle className="mb-1 text-xl">Statistics</CardTitle>
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="/" className="flex items-center gap-1">
                                <House className="w-5 h-5" /> Homepage
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                        <BreadcrumbPage className="flex items-center gap-1">
                            <ChartNoAxesColumn className="w-5 h-5" /> Statistics
                        </BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <CardDescription>From</CardDescription>
                <Popover>
                    <PopoverTrigger asChild>
                        <Button
                            variant={"outline"}
                            className="text-xs text-muted-foreground"
                            size="sm"
                        >
                        <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                        {fromDate ? format(fromDate, "dd/MM/yyyy") : <span>Pick a date</span>}
                        <ChevronDown className="w-4 h-4"/>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                        <Calendar
                            mode="single"
                            selected={fromDate}
                            onSelect={setFromDate}
                            initialFocus
                            onDayClick={() => {}}
                        />
                    </PopoverContent>
                </Popover>
                <CardDescription>to</CardDescription>
                <Popover>
                    <PopoverTrigger asChild>
                        <Button
                            variant={"outline"}
                            className="text-xs text-muted-foreground"
                            size="sm"
                        >
                        <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                        {toDate ? format(toDate, "dd/MM/yyyy") : <span>Pick a date</span>}
                        <ChevronDown className="w-4 h-4"/>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                        <Calendar
                            mode="single"
                            selected={toDate}
                            onSelect={setToDate}
                            initialFocus
                            onDayClick={() => {}}
                        />
                    </PopoverContent>
                </Popover>
                <Button size="sm" className="text-xs">
                    <Download /> Export
                </Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #8

shadcn/ui

Dashboard

'use client';

import * as React from "react"
import { CalendarIcon, House, ChartNoAxesColumn, Download, ChevronDown } from "lucide-react"
import { format } from "date-fns"
import { Calendar } from "@/components/ui/calendar"
import { Button } from "@/components/ui/button";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"

export function Header8() {
    const [fromDate, setFromDate] = React.useState()
    const [toDate, setToDate] = React.useState()
  return (
    <div className="pb-4">
        <Card className="flex flex-row flex-wrap items-center justify-between space-y-0 rounded-none">
            <CardHeader>
                <CardTitle className="mb-1 text-xl">Statistics</CardTitle>
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="/" className="flex items-center gap-1">
                                <House className="w-5 h-5" /> Homepage
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                        <BreadcrumbPage className="flex items-center gap-1">
                            <ChartNoAxesColumn className="w-5 h-5" /> Statistics
                        </BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
                <CardDescription>From</CardDescription>
                <Popover>
                    <PopoverTrigger asChild>
                        <Button
                            variant={"outline"}
                            className="text-xs text-muted-foreground"
                            size="sm"
                        >
                        <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                        {fromDate ? format(fromDate, "dd/MM/yyyy") : <span>Pick a date</span>}
                        <ChevronDown className="w-4 h-4"/>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                        <Calendar
                            mode="single"
                            selected={fromDate}
                            onSelect={setFromDate}
                            initialFocus
                            onDayClick={() => {}}
                        />
                    </PopoverContent>
                </Popover>
                <CardDescription>to</CardDescription>
                <Popover>
                    <PopoverTrigger asChild>
                        <Button
                            variant={"outline"}
                            className="text-xs text-muted-foreground"
                            size="sm"
                        >
                        <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                        {toDate ? format(toDate, "dd/MM/yyyy") : <span>Pick a date</span>}
                        <ChevronDown className="w-4 h-4"/>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                        <Calendar
                            mode="single"
                            selected={toDate}
                            onSelect={setToDate}
                            initialFocus
                            onDayClick={() => {}}
                        />
                    </PopoverContent>
                </Popover>
                <Button size="sm" className="text-xs">
                    <Download /> Export
                </Button>
            </CardContent>
        </Card>
    </div>
  )
}

Shadcn/Ui Component #9

shadcn/ui

Dashboard

'use client';

import * as React from "react"
import { Button } from "@/components/ui/button";
import {
    Card,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function Header9() {
    return (
        <div className="pb-4">
            <Card className="bg-secondary rounded-none">
                <CardHeader className="pb-0">
                    <CardTitle className="mb-1 text-xl">General</CardTitle>
                    <div className="flex flex-wrap">
                        <Button
                            key="home"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-primary"
                        >
                            Home
                            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
                        </Button>
                        <Button
                            key="profile"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-muted-foreground hover:text-primary"
                        >
                            Profile
                        </Button>
                        <Button
                            key="settings"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-muted-foreground hover:text-primary"
                        >
                            Settings
                        </Button>
                        <Button
                            key="contact"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-muted-foreground hover:text-primary"
                        >
                            Contact
                        </Button>
                    </div>
                </CardHeader>
            </Card>
        </div>
    )
}

Shadcn/Ui Component #10

shadcn/ui

Dashboard

'use client';

import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button";
import {
    Card,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function Header10() {
    return (
        <div className="pb-4">
            <Card className="rounded-none">
                <CardHeader className="pb-0">
                    <CardTitle className="mb-1 text-xl">General</CardTitle>
                    <div className="flex flex-wrap">
                        <Button
                            key="home"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-primary"
                        >
                            Home
                            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
                        </Button>
                        <Button
                            key="profile"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-muted-foreground hover:text-primary"
                        >
                            Profile
                        </Button>
                        <Button
                            key="settings"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-muted-foreground hover:text-primary"
                        >
                            Settings
                        </Button>
                        <Button
                            key="contact"
                            variant="ghost"
                            className="relative focus-visible:ring-offset-0 text-muted-foreground hover:text-primary"
                        >
                            Contact
                        </Button>
                    </div>
                </CardHeader>
            </Card>
        </div>
    )
}

Shadcn/Ui Component #11

shadcn/ui

Dashboard

'use client';

import * as React from "react"
import {
    Card,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function Header11() {
    return (
        <div className="pb-4">
            <Card className="bg-secondary rounded-none">
                <CardHeader>
                    <CardTitle className="text-xl">Hello, John Doe! 👋 </CardTitle>
                </CardHeader>
            </Card>
        </div>
    )
}

Shadcn/Ui Component #12

shadcn/ui

Dashboard

'use client';

import * as React from "react"
import {
    Card,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function Header12() {
    return (
        <div className="pb-4">
            <Card className="rounded-none">
                <CardHeader>
                    <CardTitle className="text-xl">Hello, John Doe! 👋 </CardTitle>
                </CardHeader>
            </Card>
        </div>
    )
}

Shadcn/Ui Component #13

shadcn/ui

Dashboard

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { MapPinCheckInside, Briefcase, Ellipsis } from "lucide-react"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function Project1() {
  return (
    <div className="py-4 px-4">
      <div className="flex flex-wrap -m-4">
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 2</Badge>
                <Badge variant="outline" className="font-medium">Mid-round Calls</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 1</Badge>
                <Badge variant="outline" className="font-medium">Starting project</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 3</Badge>
                <Badge variant="outline" className="font-medium">Finishing project</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 3</Badge>
                <Badge variant="outline" className="font-medium">Finishing project</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 2</Badge>
                <Badge variant="outline" className="font-medium">Mid-round Calls</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 1</Badge>
                <Badge variant="outline" className="font-medium">Starting project</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 3</Badge>
                <Badge variant="outline" className="font-medium">Finishing project</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Lorem ipsum project Name dolor sit</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="mb-2 flex items-center gap-2">
                <MapPinCheckInside className="w-4 h-4"/>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-2 flex items-center gap-2">
                <Briefcase className="w-4 h-4"/>
                <p className="text-sm">Slide.io</p>
              </div>
              <div className="mb-8 flex items-center justify-between">
                <div className="flex">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative -ml-1 w-8 h-8">
                    <AvatarImage src="" alt="@shadcn" />
                    <AvatarFallback>+3</AvatarFallback>
                  </Avatar>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
              <Progress value={35} className="mb-3 h-1" />
              <div className="flex gap-2">
                <Badge variant="secondary" className="font-medium">Phase 3</Badge>
                <Badge variant="outline" className="font-medium">Finishing project</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

Shadcn/Ui Component #14

shadcn/ui

Dashboard

import { ChevronDown, Gauge, Globe, ContactRound, BookOpen, LayoutGrid, StickyNote, Info, Inbox, FolderOpen, List, Settings, LogOut } from 'lucide-react';

import {
    SidebarInset,
    SidebarProvider,
    SidebarHeader,
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarFooter,
    SidebarTrigger,
} from "@/components/ui/sidebar"

import {
    DropdownMenu,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/components/ui/collapsible"

export function Menu1(){
    return (
        <SidebarProvider>
            <Sidebar>
                <SidebarHeader>
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                                            A
                                        </div>
                                        <div className="grid flex-1 text-left text-sm leading-tight">
                                            <span className="truncate font-semibold">Artemis</span>
                                        </div>
                                    </SidebarMenuButton>
                                </DropdownMenuTrigger>
                            </DropdownMenu>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarHeader>
                <SidebarContent>
                    <SidebarGroup>
                        <SidebarGroupLabel>MAIN</SidebarGroupLabel>
                        <SidebarMenu>
                            <Collapsible
                                asChild
                                defaultOpen={false}
                                className="group/collapsible"
                            >
                                <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton tooltip={'tooltip'}>
                                        <Gauge/>
                                        <span>Dashboard</span>
                                        <ChevronDown className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton asChild>
                                                <a href="#">
                                                    <span>Item 1</span>
                                                </a>
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                                </SidebarMenuItem>
                            </Collapsible>
                            <Collapsible
                                asChild
                                defaultOpen={false}
                                className="group/collapsible"
                            >
                                <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton tooltip={'tooltip'}>
                                        <Globe/>
                                        <span>Discover</span>
                                        <ChevronDown className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton asChild>
                                                <a href="#">
                                                    <span>Item 1</span>
                                                </a>
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                                </SidebarMenuItem>
                            </Collapsible>
                            <Collapsible
                                asChild
                                defaultOpen={false}
                                className="group/collapsible"
                            >
                                <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton tooltip={'tooltip'}>
                                        <ContactRound/>
                                        <span>Users</span>
                                        <ChevronDown className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton asChild>
                                                <a href="#">
                                                    <span>Item 1</span>
                                                </a>
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                                </SidebarMenuItem>
                            </Collapsible>
                            <Collapsible
                                asChild
                                defaultOpen={false}
                                className="group/collapsible"
                            >
                                <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton tooltip={'tooltip'}>
                                        <BookOpen />
                                        <span>Documents</span>
                                        <ChevronDown className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton asChild>
                                                <a href="#">
                                                    <span>Item 1</span>
                                                </a>
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                                </SidebarMenuItem>
                            </Collapsible>
                            <Collapsible
                                asChild
                                defaultOpen={false}
                                className="group/collapsible"
                            >
                                <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton tooltip={'tooltip'}>
                                        <LayoutGrid/>
                                        <span>Applications</span>
                                        <ChevronDown className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton asChild>
                                                <a href="#">
                                                    <span>Item 1</span>
                                                </a>
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                                </SidebarMenuItem>
                            </Collapsible>
                            <Collapsible
                                asChild
                                defaultOpen={false}
                                className="group/collapsible"
                            >
                                <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton tooltip={'tooltip'}>
                                        <StickyNote />
                                        <span>Pages</span>
                                        <ChevronDown className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton asChild>
                                                <a href="#">
                                                    <span>Item 1</span>
                                                </a>
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                                </SidebarMenuItem>
                            </Collapsible>
                        </SidebarMenu>
                    </SidebarGroup>
                    <SidebarGroup>
                        <SidebarGroupLabel>SECONDARY</SidebarGroupLabel>
                        <SidebarMenu>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild>
                                    <a href="#">
                                        <Info/>
                                        <span>Support Center</span>
                                    </a>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild>
                                    <a href="#">
                                        <Inbox/>
                                        <span>Inbox</span>
                                    </a>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild>
                                    <a href="#">
                                        <FolderOpen />
                                        <span>File Manager</span>
                                    </a>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild>
                                    <a href="#">
                                        <List />
                                        <span>Data List</span>
                                    </a>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroup>
                </SidebarContent>
                <SidebarFooter>
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <SidebarMenuButton asChild>
                                <a href="#">
                                    <Settings />
                                    <span>Settings</span>
                                </a>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem>
                            <SidebarMenuButton asChild>
                                <a href="#">
                                    <LogOut />
                                    <span>Logout</span>
                                </a>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarFooter>
            </Sidebar>
            <SidebarInset>
                <div className="flex items-center justify-between w-full h-16 bg-secondary py-4 px-4 md:hidden">
                    <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                            A
                        </div>
                        <div className="grid flex-1 text-left text-sm leading-tight">
                            <span className="truncate font-semibold">Artemis</span>
                        </div>
                    </SidebarMenuButton>
                    <SidebarTrigger />
                </div>
                <div></div>
            </SidebarInset>
        </SidebarProvider>
    )
  }

Shadcn/Ui Component #15

shadcn/ui

Dashboard

import { WalletCards, ChevronDown, Wallet, File, LayoutGrid, Link2, Monitor } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function Faq1() {
  return (
    <div className="py-4 px-4">
        <Card className="mb-8 px-5 md:px-10">
            <CardHeader className="h-[280px] justify-center">
                <CardTitle className="text-3xl">Lets answer some questions</CardTitle>
                <CardDescription>Choose a category to quickly find the help you need</CardDescription>
            </CardHeader>
        </Card>
        <div className="flex flex-wrap -m-4">
            <div className="p-4 w-full md:w-1/4">
                <Card>
                    <CardHeader className="w-full p-2">
                        <Button variant="secondary" className="justify-start">
                            <WalletCards className="w-5 h-5 mr-2" /> Payment
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <Wallet className="w-5 h-5 mr-2" /> Subscriptions
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <File className="w-5 h-5 mr-2" /> Documentation
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <LayoutGrid className="w-5 h-5 mr-2" /> Tutorials
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <Link2  className="w-5 h-5 mr-2" /> APIs
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <Monitor className="w-5 h-5 mr-2" /> Product & Services
                        </Button>
                    </CardHeader>
                </Card>
            </div>
            <div className="p-4 w-full md:w-3/4">
                <div className="flex flex-wrap items-center">
                    <Button variant="secondary" size="lg" className="w-16 h-16">
                        <WalletCards className="w-8 h-8" />
                    </Button>
                    <Card className="border-none">
                        <CardHeader className="justify-center">
                            <CardTitle className="text-2xl">Payment</CardTitle>
                            <CardDescription>Monitor key metrics, check reporting and review insights</CardDescription>
                        </CardHeader>
                    </Card>
                </div>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                    <CardContent>
                        <CardDescription>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec urna lacus. Pellentesque in lacus eu est suscipit volutpat eu eget diam. Donec eget justo et diam condimentum bibendum. Donec convallis tellus sem, at lobortis nulla sagittis in. Proin facilisis a enim eget luctus. Sed et maximus libero. Nulla pellentesque imperdiet neque vitae fringilla.
                        </CardDescription>
                    </CardContent>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card>
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
            </div>
        </div>
    </div>
  )
}

Shadcn/Ui Component #16

shadcn/ui

Dashboard

import { X } from "lucide-react"
import { Alert, AlertTitle } from "@/components/ui/alert"
import Link from "next/link"

export function Alert1() {
    return (
        <div className="p-4">
            <Alert variant="destructive" className="flex items-center justify-between gap-2">
                <AlertTitle>
                    Example for a banner
                </AlertTitle>
                <Link href="#">
                    <X className="w-4 h-4" />
                </Link>
            </Alert>
        </div>
    )
}

Shadcn/Ui Component #17

shadcn/ui

Dashboard

import { Ellipsis, Plus, ClipboardList, Clock2, Text } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function TaskTable1() {
    return (
        <div className="px-4 py-4">
            <div className="flex flex-wrap -m-4">
                <div className="w-full md:w-2/3 p-4">
                    <Card>
                        <CardHeader className="flex-row flex-wrap items-center justify-between space-y-0 gap-4">
                            <div>
                                <div className="flex flex-wrap items-center gap-2">
                                    <CardTitle className="text-xl">Tasks</CardTitle>
                                    <Badge className="text-xs font-medium">33 Tasks</Badge>
                                </div>
                                <CardDescription className="text-sm">Current tasks</CardDescription>
                            </div>
                            <Button>
                                <Plus /> Create
                            </Button>
                        </CardHeader>
                        <CardContent>
                            <Card className="mb-2 flex flex-row flex-wrap items-center justify-between gap-4">
                                <CardHeader className="flex-row flex-wrap items-center space-y-0 gap-3">
                                    <div className="flex items-center justify-center bg-secondary w-10 h-10 rounded-md">
                                        <ClipboardList className="w6 h-6"/>
                                    </div>
                                    <div>
                                        <CardTitle className="font-medium text-sm">Testing</CardTitle>
                                        <CardDescription className="text-xs">QA Managers</CardDescription>
                                    </div>
                                </CardHeader>
                                <CardContent className="flex flex-wrap items-center gap-1 pb-0">
                                    <Badge className="text-xs font-medium">3 Tasks</Badge>
                                    <Button variant="ghost" size="icon" className="text-muted-foreground">
                                        <Ellipsis/>
                                    </Button>
                                </CardContent>
                            </Card>
                            <Card className="mb-2 flex flex-row flex-wrap items-center justify-between gap-4">
                                <CardHeader className="flex-row flex-wrap items-center space-y-0 gap-3">
                                    <div className="flex items-center justify-center bg-secondary w-10 h-10 rounded-md">
                                        <ClipboardList className="w6 h-6"/>
                                    </div>
                                    <div>
                                        <CardTitle className="font-medium text-sm">Testing</CardTitle>
                                        <CardDescription className="text-xs">QA Managers</CardDescription>
                                    </div>
                                </CardHeader>
                                <CardContent className="flex flex-wrap items-center gap-1 pb-0">
                                    <Badge className="text-xs font-medium">3 Tasks</Badge>
                                    <Button variant="ghost" size="icon" className="text-muted-foreground">
                                        <Ellipsis/>
                                    </Button>
                                </CardContent>
                            </Card>
                            <Card className="mb-2 flex flex-row flex-wrap items-center justify-between gap-4">
                                <CardHeader className="flex-row flex-wrap items-center space-y-0 gap-3">
                                    <div className="flex items-center justify-center bg-secondary w-10 h-10 rounded-md">
                                        <ClipboardList className="w6 h-6"/>
                                    </div>
                                    <div>
                                        <CardTitle className="font-medium text-sm">Testing</CardTitle>
                                        <CardDescription className="text-xs">QA Managers</CardDescription>
                                    </div>
                                </CardHeader>
                                <CardContent className="flex flex-wrap items-center gap-1 pb-0">
                                    <Badge className="text-xs font-medium">3 Tasks</Badge>
                                    <Button variant="ghost" size="icon" className="text-muted-foreground">
                                        <Ellipsis/>
                                    </Button>
                                </CardContent>
                            </Card>
                            <Card className="mb-2 flex flex-row flex-wrap items-center justify-between gap-4">
                                <CardHeader className="flex-row flex-wrap items-center space-y-0 gap-3">
                                    <div className="flex items-center justify-center bg-secondary w-10 h-10 rounded-md">
                                        <ClipboardList className="w6 h-6"/>
                                    </div>
                                    <div>
                                        <CardTitle className="font-medium text-sm">Testing</CardTitle>
                                        <CardDescription className="text-xs">QA Managers</CardDescription>
                                    </div>
                                </CardHeader>
                                <CardContent className="flex flex-wrap items-center gap-1 pb-0">
                                    <Badge className="text-xs font-medium">3 Tasks</Badge>
                                    <Button variant="ghost" size="icon" className="text-muted-foreground">
                                        <Ellipsis/>
                                    </Button>
                                </CardContent>
                            </Card>
                            <Card className="flex flex-row flex-wrap items-center justify-between gap-4">
                                <CardHeader className="flex-row flex-wrap items-center space-y-0 gap-3">
                                    <div className="flex items-center justify-center bg-secondary w-10 h-10 rounded-md">
                                        <ClipboardList className="w6 h-6"/>
                                    </div>
                                    <div>
                                        <CardTitle className="font-medium text-sm">Testing</CardTitle>
                                        <CardDescription className="text-xs">QA Managers</CardDescription>
                                    </div>
                                </CardHeader>
                                <CardContent className="flex flex-wrap items-center gap-1 pb-0">
                                    <Badge className="text-xs font-medium">3 Tasks</Badge>
                                    <Button variant="ghost" size="icon" className="text-muted-foreground">
                                        <Ellipsis/>
                                    </Button>
                                </CardContent>
                            </Card>
                        </CardContent>
                    </Card>
                </div>
                <div className="w-full md:w-1/3 p-4">
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-xl">Latest Activity</CardTitle>
                            <CardDescription className="text-sm">Dolor sit amet</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="mb-8">
                                <CardTitle className="mb-1 text-sm font-medium">Random Name for Acitivity Timeline</CardTitle>
                                <CardDescription className="flex items-center text-xs text-muted-foreground gap-1">
                                    <Clock2 className="w-4 h-4" /> 2h Ago
                                </CardDescription>
                            </div>
                            <div className="mb-8">
                                <CardTitle className="mb-1 text-sm font-medium">Random Name for Acitivity Timeline</CardTitle>
                                <CardDescription className="flex items-center text-xs text-muted-foreground gap-1">
                                    <Clock2 className="w-4 h-4" /> 2h Ago
                                </CardDescription>
                            </div>
                            <div className="mb-8">
                                <CardTitle className="mb-1 text-sm font-medium">Random Name for Acitivity Timeline</CardTitle>
                                <CardDescription className="flex items-center text-xs text-muted-foreground gap-1">
                                    <Clock2 className="w-4 h-4" /> 2h Ago
                                </CardDescription>
                            </div>
                            <div className="mb-8">
                                <CardTitle className="mb-1 text-sm font-medium">Random Name for Acitivity Timeline</CardTitle>
                                <CardDescription className="flex items-center text-xs text-muted-foreground gap-1">
                                    <Clock2 className="w-4 h-4" /> 2h Ago
                                </CardDescription>
                            </div>
                            <div className="mb-8">
                                <CardTitle className="mb-1 text-sm font-medium">Random Name for Acitivity Timeline</CardTitle>
                                <CardDescription className="flex items-center text-xs text-muted-foreground gap-1">
                                    <Clock2 className="w-4 h-4" /> 2h Ago
                                </CardDescription>
                            </div>
                            <Button>
                                <Text/> See Recent Activity
                            </Button>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}

Shadcn/Ui Component #18

shadcn/ui

Dashboard

'use client';

import { Area, AreaChart } from "recharts"
import { Badge } from "@/components/ui/badge"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
} from "@/components/ui/card"

const chartData_graph_files_graph1 = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartContainer1_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#382CDD",
    },
}

const chartContainer2_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#2D70F5",
    },
}

const chartContainer3_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#17BB84",
    },
}

const chartContainer4_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#F67A28",
    },
}

const areaChart1_margin_graph_files_graph1 = {
    left: 0,
    right: 0,
}

export function Graph1() {
  return (
    <div className="py-4 px-4">
        <div className="flex flex-wrap -m-4">
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Total number of users</CardDescription>
                        <CardTitle className="text-3xl">1 450</CardTitle>
                        <Badge variant="secondary" className="text-xs font-medium text-muted-foreground">+115</Badge>

                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer1_graph_files_graph1}
                        >
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Revenue</CardDescription>
                        <CardTitle className="text-3xl">$9,054</CardTitle>
                        <Badge variant="destructive" className="text-xs font-medium">-$1,535</Badge>
                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer2_graph_files_graph1}
                        >
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Bounce Rate</CardDescription>
                        <CardTitle className="text-3xl">73.5%</CardTitle>
                        <Badge variant="secondary" className="text-xs font-medium text-muted-foreground">73.5%</Badge>

                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer3_graph_files_graph1}>
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Visit Duration</CardDescription>
                        <CardTitle className="text-3xl">0m 50s</CardTitle>
                        <Badge variant="secondary" className="text-xs font-medium text-muted-foreground">+15s</Badge>

                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer4_graph_files_graph1}
                        >
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
        </div>
    </div>
  )
}

Shadcn/Ui Component #19

shadcn/ui

Dashboard

"use client"

import { Ellipsis } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Bar, BarChart, AreaChart, Area } from "recharts"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"

import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart"

import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
    CardFooter
} from "@/components/ui/card"

const chartData_stats_stat1 = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
  { month: "July", desktop: 186 },
  { month: "August", desktop: 305 },
  { month: "September", desktop: 237 },
  { month: "October", desktop: 73 },
  { month: "November", desktop: 209 },
  { month: "December", desktop: 214 },
]

const chartContainer1_stats_stat1 = {
    desktop: {
        label: "Desktop",
        color: "#2D70F5",
    }
};
const chartContainer2_stats_stat1 = {
    desktop: {
        label: "Desktop",
        color: "#F67A28"
    },
    mobile: {
        label: "Mobile",
        color: "#E85444"
    }
};

export function Stat1() {
  return (
    <div className="py-4 px-4">
        <div className="flex flex-wrap -m-4">
            <div className="p-4 w-full md:w-1/2">
                <Card className="mb-8">
                    <CardHeader className="flex-wrap flex-row items-center justify-between space-y-0 pt-2 pb-2 gap-2">
                        <CardDescription>Profit</CardDescription>
                        <Button variant="ghost" size="icon" className="text-muted-foreground">
                            <Ellipsis />
                        </Button>
                    </CardHeader>
                    <CardContent className="flex flex-wrap items-center pb-4 gap-4">
                        <CardTitle className="text-3xl">$124,563.00</CardTitle>
                        <Badge variant="secondary" className="font-medium text-muted-foreground">+6.9%</Badge>
                    </CardContent>
                    <CardFooter className="flex-col items-start">
                        <Progress value={35} className="mb-2 h-1" />
                        <CardDescription className="text-xs text-muted-foreground">Yearly Goal</CardDescription>
                    </CardFooter>
                </Card>
                <Card>
                    <CardHeader className="flex-wrap flex-row items-center justify-between space-y-0 pb-2 gap-2">
                        <CardDescription>Visit Duration</CardDescription>
                        <Button variant="ghost" size="icon" className="text-muted-foreground">
                            <Ellipsis />
                        </Button>
                    </CardHeader>
                    <CardContent className="flex flex-wrap items-center pb-2 gap-4">
                        <CardTitle className="text-3xl">94.2%</CardTitle>
                        <Badge variant="secondary" className="font-medium text-muted-foreground">+6.9%</Badge>
                    </CardContent>
                    <CardFooter>
                        <ChartContainer config={chartContainer1_stats_stat1} className="h-[50px] w-full">
                            <BarChart accessibilityLayer data={chartData_stats_stat1} >
                                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}  />
                            </BarChart>
                        </ChartContainer>
                    </CardFooter>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2">
                <Card>
                    <CardHeader className="flex-row flex-wrap items-center justify-between gap-4 py-4 space-y-0 border-b">
                        <CardTitle className="text-xl">Balance</CardTitle>
                        <div className="flex flex-wrap gap-3">
                            <Select>
                                <SelectTrigger className="w-[108px]">
                                    <SelectValue placeholder="Monthly" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectGroup>
                                        <SelectItem value="monthly">Monthly</SelectItem>
                                        <SelectItem value="yearly">Yearly</SelectItem>
                                    </SelectGroup>
                                </SelectContent>
                            </Select>
                        </div>
                    </CardHeader>
                    <CardContent className="flex flex-wrap items-center pt-2 px-4 gap-4">
                        <div className="flex flex-wrap w-full">
                            <div className="w-full md:w-1/2 p-3">
                                <Card>
                                    <CardHeader>
                                        <CardDescription className="text-xs">Earnings </CardDescription>
                                        <div className="flex flex-wrap items-center gap-2">
                                            <CardTitle className="text-3xl">43.41%</CardTitle>
                                            <Badge variant="secondary" className="font-medium text-muted-foreground">+2.5%</Badge>
                                        </div>
                                    </CardHeader>
                                </Card>
                            </div>
                            <div className="w-full md:w-1/2 p-3">
                                <Card>
                                    <CardHeader>
                                        <CardDescription className="text-xs">Balance Set</CardDescription>
                                        <div className="flex flex-wrap items-center gap-2">
                                            <CardTitle className="text-3xl">$95,422</CardTitle>
                                            <Badge variant="secondary" className="font-medium text-muted-foreground">+13.5%</Badge>
                                        </div>
                                    </CardHeader>
                                </Card>
                            </div>
                        </div>
                    </CardContent>
                    <CardFooter className="p-0">
                        <ChartContainer config={chartContainer2_stats_stat1} className="h-[200px] w-full">
                                <AreaChart
                                    accessibilityLayer
                                    data={chartData_stats_stat1}
                                    
                                >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="dot" hideLabel />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="linear"
                                    fill="#EBEAFC"
                                    fillOpacity={0.4}
                                    stroke="#382CDD"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardFooter>
                </Card>
            </div>
        </div>
    </div>
  )
}

Shadcn/Ui Component #20

shadcn/ui

Dashboard

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

  export function GeneralTable1() {
    return (
        <div className="py-4 px-4">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead className="text-xs">Name</TableHead>
                        <TableHead className="text-xs">Position</TableHead>
                        <TableHead className="text-xs">Office</TableHead>
                        <TableHead className="text-xs">Age</TableHead>
                        <TableHead className="text-xs">Start Date</TableHead>
                        <TableHead className="text-xs">Salary</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <TableRow>
                        <TableCell className="text-xs bg-gray-100">Ashton Cox</TableCell>
                        <TableCell className="text-xs bg-gray-50">Technical Author</TableCell>
                        <TableCell className="text-xs bg-gray-50">San Francisco</TableCell>
                        <TableCell className="text-xs bg-gray-50">66</TableCell>
                        <TableCell className="text-xs bg-gray-50">22/04/2025</TableCell>
                        <TableCell className="text-xs bg-gray-50">$4,800</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell className="text-xs bg-gray-100">Cedric Kelly</TableCell>
                        <TableCell className="text-xs">Javascript Developer</TableCell>
                        <TableCell className="text-xs">Edinburgh</TableCell>
                        <TableCell className="text-xs">22</TableCell>
                        <TableCell className="text-xs">22/04/2025</TableCell>
                        <TableCell className="text-xs">$3,600</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell className="text-xs bg-gray-100">Garrett Winters</TableCell>
                        <TableCell className="text-xs bg-gray-50">Director</TableCell>
                        <TableCell className="text-xs bg-gray-50">San Francisco</TableCell>
                        <TableCell className="text-xs bg-gray-50">63</TableCell>
                        <TableCell className="text-xs bg-gray-50">22/04/2025</TableCell>
                        <TableCell className="text-xs bg-gray-50">$5,300</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell className="text-xs bg-gray-100">Tiger Nixon</TableCell>
                        <TableCell className="text-xs">System Architect</TableCell>
                        <TableCell className="text-xs">San Francisco</TableCell>
                        <TableCell className="text-xs">61</TableCell>
                        <TableCell className="text-xs">22/04/2025</TableCell>
                        <TableCell className="text-xs">$3,120</TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </div>
    )
  }

Shadcn-Ui UI Components by Shuffle

Choose from 112 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Shuffle Components in Shadcn-Ui library

Framework

UI Library

Components

Shadcn/Ui Component #1

Shadcn/Ui Component #2

Shadcn/Ui Component #3

Shadcn/Ui Component #4

Shadcn/Ui Component #5

Shadcn/Ui Component #6

Shadcn/Ui Component #7

Shadcn/Ui Component #8

Shadcn/Ui Component #9

Shadcn/Ui Component #10

Shadcn/Ui Component #11

Shadcn/Ui Component #12

Shadcn/Ui Component #13

Shadcn/Ui Component #14

Shadcn/Ui Component #15

Shadcn/Ui Component #16

Shadcn/Ui Component #17

Shadcn/Ui Component #18

Shadcn/Ui Component #19

Shadcn/Ui Component #20

Shadcn-Ui UI Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company