Shadcn/Ui Components in Shadcn Ui library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Shadcn/Ui Component #1

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 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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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,

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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,

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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" />

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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"

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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 },

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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 {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Shadcn/Ui Components by Shuffle

Browse 112 of ready-made components in Shadcn/Ui and Shadcn-Ui library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

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

shadcn/ui Components – Shadcn Ui Library

Framework

UI Library

Components

Shadcn/Ui Component #1

Get the code for 13,400+ components

Shadcn/Ui Component #2

Get the code for 13,400+ components

Shadcn/Ui Component #3

Get the code for 13,400+ components

Shadcn/Ui Component #4

Get the code for 13,400+ components

Shadcn/Ui Component #5

Get the code for 13,400+ components

Shadcn/Ui Component #6

Get the code for 13,400+ components

Shadcn/Ui Component #7

Get the code for 13,400+ components

Shadcn/Ui Component #8

Get the code for 13,400+ components

Shadcn/Ui Component #9

Get the code for 13,400+ components

Shadcn/Ui Component #10

Get the code for 13,400+ components

Shadcn/Ui Component #11

Get the code for 13,400+ components

Shadcn/Ui Component #12

Get the code for 13,400+ components

Shadcn/Ui Component #13

Get the code for 13,400+ components

Shadcn/Ui Component #14

Get the code for 13,400+ components

Shadcn/Ui Component #15

Get the code for 13,400+ components

Shadcn/Ui Component #16

Get the code for 13,400+ components

Shadcn/Ui Component #17

Get the code for 13,400+ components

Shadcn/Ui Component #18

Get the code for 13,400+ components

Shadcn/Ui Component #19

Get the code for 13,400+ components

Shadcn/Ui Component #20

Get the code for 13,400+ components

Shadcn/Ui Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support