User favorites
Trending blocks
Browse the most popular blocks on the site. These trending components are frequently copied by developers and represent the most useful and well-designed UI elements in our collection. Explore what others are using to enhance your projects.
Pricing Sections: cards
import { Badge } from "@/components/ui/badge";import { Button } from "@/components/ui/button";import {Card,CardContent,CardDescription,CardFooter,CardHeader,CardTitle,} from "@/components/ui/card";import { Label } from "@/components/ui/label";import { Switch } from "@/components/ui/switch";import {Table,TableBody,TableCell,TableHead,TableHeader,TableRow,} from "@/components/ui/table";import { CheckIcon, MinusIcon } from "lucide-react";import React from "react";interface PlanFeature {type: string;features: {name: string;free: boolean;startup: boolean;team: boolean;enterprise: boolean;}[];}const planFeatures: PlanFeature[] = [{type: "Financial data",features: [{name: "Open/High/Low/Close",free: true,startup: true,team: true,enterprise: true,},{name: "Price-volume difference indicator ",free: true,startup: true,team: true,enterprise: true,},],},{type: "On-chain data",features: [{name: "Network growth",free: true,startup: false,team: true,enterprise: true,},{name: "Average token age consumed",free: true,startup: false,team: true,enterprise: true,},{name: "Exchange flow",free: false,startup: false,team: true,enterprise: true,},{name: "Total ERC20 exchange funds flow",free: false,startup: false,team: true,enterprise: true,},],},{type: "Social data",features: [{name: "Dev activity",free: false,startup: true,team: false,enterprise: true,},{name: "Topic search",free: true,startup: true,team: true,enterprise: true,},{name: "Relative social dominance",free: true,startup: true,team: false,enterprise: true,},],},];export default function PricingSectionCards() {return (<>{/* Pricing */}<div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32">{/* Title */}<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14"><h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">Pricing</h2><p className="mt-1 text-muted-foreground">Whatever your status, our offers evolve according to your needs.</p></div>{/* End Title */}{/* Switch */}<div className="flex justify-center items-center"><Label htmlFor="payment-schedule" className="me-3">Monthly</Label><Switch id="payment-schedule" /><Label htmlFor="payment-schedule" className="relative ms-3">Annual<span className="absolute -top-10 start-auto -end-28"><span className="flex items-center"><svgclassName="w-14 h-8 -me-6"width={45}height={25}viewBox="0 0 45 25"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M43.2951 3.47877C43.8357 3.59191 44.3656 3.24541 44.4788 2.70484C44.5919 2.16427 44.2454 1.63433 43.7049 1.52119L43.2951 3.47877ZM4.63031 24.4936C4.90293 24.9739 5.51329 25.1423 5.99361 24.8697L13.8208 20.4272C14.3011 20.1546 14.4695 19.5443 14.1969 19.0639C13.9242 18.5836 13.3139 18.4152 12.8336 18.6879L5.87608 22.6367L1.92723 15.6792C1.65462 15.1989 1.04426 15.0305 0.563943 15.3031C0.0836291 15.5757 -0.0847477 16.1861 0.187863 16.6664L4.63031 24.4936ZM43.7049 1.52119C32.7389 -0.77401 23.9595 0.99522 17.3905 5.28788C10.8356 9.57127 6.58742 16.2977 4.53601 23.7341L6.46399 24.2659C8.41258 17.2023 12.4144 10.9287 18.4845 6.96211C24.5405 3.00476 32.7611 1.27399 43.2951 3.47877L43.7049 1.52119Z"fill="currentColor"className="text-muted-foreground"/></svg><Badge className="mt-3 uppercase">Save up to 10%</Badge></span></span></Label></div>{/* End Switch */}{/* Grid */}<div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">{/* Card */}<Card className="flex flex-col"><CardHeader className="text-center pb-2"><CardTitle className="mb-7">Free</CardTitle><span className="font-bold text-5xl">Free</span></CardHeader><CardDescription className="text-center">Forever free</CardDescription><CardContent className="flex-1"><ul className="mt-7 space-y-2.5 text-sm"><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">1 user</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Plan features</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Product support</span></li></ul></CardContent><CardFooter><Button className="w-full" variant={"outline"}>Sign up</Button></CardFooter></Card>{/* End Card */}{/* Card */}<Card className="border-primary flex flex-col"><CardHeader className="text-center pb-2"><Badge className="uppercase w-max self-center mb-3">Most popular</Badge><CardTitle className="!mb-7">Startup</CardTitle><span className="font-bold text-5xl">£39</span></CardHeader><CardDescription className="text-center w-11/12 mx-auto">All the basics for starting a new business</CardDescription><CardContent className="flex-1"><ul className="mt-7 space-y-2.5 text-sm"><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">2 user</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Plan features</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Product support</span></li></ul></CardContent><CardFooter><Button className="w-full">Sign up</Button></CardFooter></Card>{/* End Card */}{/* Card */}<Card className="flex flex-col"><CardHeader className="text-center pb-2"><CardTitle className="mb-7">Team</CardTitle><span className="font-bold text-5xl">£89</span></CardHeader><CardDescription className="text-center w-11/12 mx-auto">Everything you need for a growing business</CardDescription><CardContent className="flex-1"><ul className="mt-7 space-y-2.5 text-sm"><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">5 user</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Plan features</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Product support</span></li></ul></CardContent><CardFooter><Button className="w-full" variant={"outline"}>Sign up</Button></CardFooter></Card>{/* End Card */}{/* Card */}<Card className="flex flex-col"><CardHeader className="text-center pb-2"><CardTitle className="mb-7">Enterprise</CardTitle><span className="font-bold text-5xl">149</span></CardHeader><CardDescription className="text-center w-11/12 mx-auto">Advanced features for scaling your business</CardDescription><CardContent><ul className="mt-7 space-y-2.5 text-sm"><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">10 user</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Plan features</span></li><li className="flex space-x-2"><CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" /><span className="text-muted-foreground">Product support</span></li></ul></CardContent><CardFooter><Button className="w-full" variant={"outline"}>Sign up</Button></CardFooter></Card>{/* End Card */}</div>{/* End Grid */}{/* Comparison table */}<div className="mt-20 lg:mt-32"><div className="lg:text-center mb-10 lg:mb-20"><h3 className="text-2xl font-semibold dark:text-white">Compare plans</h3></div>{/* xs to lg */}<Table className="hidden lg:table"><TableHeader><TableRow className="bg-muted hover:bg-muted"><TableHead className="w-3/12 text-primary">Plans</TableHead><TableHead className="w-2/12 text-primary text-lg font-medium text-center">Free</TableHead><TableHead className="w-2/12 text-primary text-lg font-medium text-center">Startup</TableHead><TableHead className="w-2/12 text-primary text-lg font-medium text-center">Team</TableHead><TableHead className="w-2/12 text-primary text-lg font-medium text-center">Enterprise</TableHead></TableRow></TableHeader><TableBody>{planFeatures.map((featureType) => (<React.Fragment key={featureType.type}><TableRow className="bg-muted/50"><TableCell colSpan={5} className="font-bold">{featureType.type}</TableCell></TableRow>{featureType.features.map((feature) => (<TableRowkey={feature.name}className="text-muted-foreground"><TableCell>{feature.name}</TableCell><TableCell><div className="mx-auto w-min">{feature.free ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</div></TableCell><TableCell><div className="mx-auto w-min">{feature.startup ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</div></TableCell><TableCell><div className="mx-auto w-min">{feature.team ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</div></TableCell><TableCell><div className="mx-auto w-min">{feature.enterprise ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</div></TableCell></TableRow>))}</React.Fragment>))}</TableBody></Table><div className="space-y-24 lg:hidden"><section><div className="mb-4"><h4 className="text-xl font-medium">Free</h4></div><Table>{planFeatures.map((featureType) => (<React.Fragment key={featureType.type}><TableRow className="bg-muted hover:bg-muted"><TableCellcolSpan={2}className="w-10/12 text-primary font-bold">{featureType.type}</TableCell></TableRow>{featureType.features.map((feature) => (<TableRowclassName="text-muted-foreground"key={feature.name}><TableCell className="w-11/12">{feature.name}</TableCell><TableCell className="text-right">{feature.enterprise ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</TableCell></TableRow>))}</React.Fragment>))}</Table></section><section><div className="mb-4"><h4 className="text-xl font-medium">Startup</h4></div><Table>{planFeatures.map((featureType) => (<React.Fragment key={featureType.type}><TableRow className="bg-muted hover:bg-muted"><TableCellcolSpan={2}className="w-10/12 text-primary font-bold">{featureType.type}</TableCell></TableRow>{featureType.features.map((feature) => (<TableRowclassName="text-muted-foreground"key={feature.name}><TableCell className="w-11/12">{feature.name}</TableCell><TableCell className="text-right">{feature.startup ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</TableCell></TableRow>))}</React.Fragment>))}</Table></section><section><div className="mb-4"><h4 className="text-xl font-medium">Team</h4></div><Table>{planFeatures.map((featureType) => (<React.Fragment key={featureType.type}><TableRow className="bg-muted hover:bg-muted"><TableCellcolSpan={2}className="w-10/12 text-primary font-bold">{featureType.type}</TableCell></TableRow>{featureType.features.map((feature) => (<TableRowclassName="text-muted-foreground"key={feature.name}><TableCell className="w-11/12">{feature.name}</TableCell><TableCell className="text-right">{feature.team ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</TableCell></TableRow>))}</React.Fragment>))}</Table></section><section><div className="mb-4"><h4 className="text-xl font-medium">Enterprise</h4></div><Table>{planFeatures.map((featureType) => (<React.Fragment key={featureType.type}><TableRow className="bg-muted hover:bg-muted"><TableCellcolSpan={2}className="w-10/12 text-primary font-bold">{featureType.type}</TableCell></TableRow>{featureType.features.map((feature) => (<TableRowclassName="text-muted-foreground"key={feature.name}><TableCell className="w-11/12">{feature.name}</TableCell><TableCell className="text-right">{feature.enterprise ? (<CheckIcon className="h-5 w-5" />) : (<MinusIcon className="h-5 w-5" />)}</TableCell></TableRow>))}</React.Fragment>))}</Table></section></div>{/* End xs to lg */}</div>{/* End Comparison table */}</div>{/* End Pricing */}</>);}
Hero Sections: simple Centred
import { Button } from "@/components/ui/button";import { ChevronRightIcon } from "lucide-react";export default function HeroSectionSimpleCentred() {return (<>{/* Hero */}<div><div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">{/* Announcement Banner */}<div className="flex justify-center"><aclassName="inline-flex items-center gap-x-2 rounded-full border p-1 ps-3 text-sm transition"href="#">PRO release - Join to waitlist<span className="bg-muted-foreground/15 inline-flex items-center justify-center gap-x-2 rounded-full px-2.5 py-1.5 text-sm font-semibold"><svgclassName="h-4 w-4 flex-shrink-0"xmlns="http://www.w3.org/2000/svg"width={24}height={24}viewBox="0 0 24 24"fill="none"stroke="currentColor"strokeWidth={2}strokeLinecap="round"strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg></span></a></div>{/* End Announcement Banner */}{/* Title */}<div className="mx-auto mt-5 max-w-2xl text-center"><h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">Let's Build Together</h1></div>{/* End Title */}<div className="mx-auto mt-5 max-w-3xl text-center"><p className="text-muted-foreground text-xl">Over 10+ fully responsive, UI blocks you can drop into your ShadcnUI projects and customize to your heart's content.</p></div>{/* Buttons */}<div className="mt-8 flex justify-center gap-3"><Button size={"lg"}>Get started</Button><Button size={"lg"} variant={"outline"}>Learn more</Button></div>{/* End Buttons */}<div className="mt-5 flex items-center justify-center gap-x-1 sm:gap-x-3"><span className="text-muted-foreground text-sm">Package Manager:</span><span className="text-sm font-bold">npm </span><svgclassName="text-muted-foreground h-5 w-5"width={16}height={16}viewBox="0 0 16 16"fill="none"xmlns="http://www.w3.org/2000/svg"aria-hidden="true"><pathd="M6 13L10 3"stroke="currentColor"strokeLinecap="round"/></svg><aclassName="inline-flex items-center gap-x-1 text-sm font-medium decoration-2 hover:underline"href="#">Installation Guide<ChevronRightIcon className="h-4 w-4 flex-shrink-0" /></a></div></div></div>{/* End Hero */}</>);}
Feature Sections: simple
import { Card, CardContent } from "@/components/ui/card";import {RocketIcon,ShieldCheckIcon,ZapIcon,BarChartIcon,} from "lucide-react";const features = [{icon: RocketIcon,title: "Fast Performance",description:"Optimized for speed and efficiency, ensuring your application runs smoothly.",},{icon: ShieldCheckIcon,title: "Secure by Default",description: "Built-in security features to protect your data and users.",},{icon: ZapIcon,title: "Easy Integration",description: "Simple to integrate with your existing tools and workflows.",},{icon: BarChartIcon,title: "Analytics",description: "Detailed insights and metrics to track your progress.",},];export default function FeatureSectionSimple() {return (<section className="container mx-auto space-y-8 px-4 py-24 md:px-6 2xl:max-w-[1400px]"><div className="space-y-4 text-center"><h2 className="text-3xl font-bold">Features that make you productive</h2><p className="text-muted-foreground mx-auto max-w-2xl">Everything you need to get your work done efficiently and effectively.Built for developers, designed for success.</p></div><div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">{features.map((feature) => (<Card key={feature.title} className="p-0"><CardContent className="space-y-2 p-6"><feature.icon className="text-primary h-12 w-12" /><h3 className="font-bold">{feature.title}</h3><p className="text-muted-foreground text-sm">{feature.description}</p></CardContent></Card>))}</div></section>);}
User Profiles: billing
import { Button } from "@/components/ui/button";import { Card, CardContent } from "@/components/ui/card";import { Badge } from "@/components/ui/badge";import { Progress } from "@/components/ui/progress";import {CreditCard,Download,FileText,Package,RefreshCw,Settings,Zap,} from "lucide-react";const invoices = [{id: "INV-001",date: "Mar 1, 2024",amount: "$29.00",status: "Paid",},{id: "INV-002",date: "Feb 1, 2024",amount: "$29.00",status: "Paid",},{id: "INV-003",date: "Jan 1, 2024",amount: "$29.00",status: "Paid",},];export default function UserBilling() {return (<div className="container mx-auto px-4 py-6 md:px-6 2xl:max-w-[1400px]"><div className="mx-auto max-w-4xl">{/* Header */}<div className="mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row"><div><h1 className="text-2xl font-semibold">Billing & Subscription</h1><p className="text-muted-foreground text-sm">Manage your subscription and billing details</p></div><Button variant="outline"><Settings className="mr-2 size-4" />Billing Settings</Button></div>{/* Current Plan */}<Card className="mb-8 p-0"><CardContent className="p-6"><div className="flex flex-col items-start justify-between gap-6 sm:flex-row"><div><div className="flex items-center gap-2"><Package className="text-primary size-5" /><h2 className="text-lg font-semibold">Pro Plan</h2><Badge>Current Plan</Badge></div><p className="text-muted-foreground mt-1 text-sm">$29/month • Renews on April 1, 2024</p></div><div className="flex flex-wrap gap-2"><Button variant="outline">Change Plan</Button><Button variant="destructive">Cancel Plan</Button></div></div><div className="mt-6 space-y-4"><div><div className="mb-2 flex items-center justify-between"><div className="flex items-center gap-2"><Zap className="text-primary size-4" /><span className="text-sm font-medium">API Requests</span></div><span className="text-sm">8,543 / 10,000</span></div><Progress value={85.43} className="h-2" /></div><div><div className="mb-2 flex items-center justify-between"><div className="flex items-center gap-2"><RefreshCw className="text-primary size-4" /><span className="text-sm font-medium">Monthly Syncs</span></div><span className="text-sm">143 / 200</span></div><Progress value={71.5} className="h-2" /></div></div></CardContent></Card>{/* Payment Method */}<Card className="mb-8 p-0"><CardContent className="p-6"><div className="flex flex-col items-start justify-between gap-4 sm:flex-row"><div className="space-y-1"><h2 className="text-lg font-semibold">Payment Method</h2><div className="flex items-center gap-2"><CreditCard className="text-muted-foreground size-4" /><span className="text-muted-foreground text-sm">Visa ending in 4242</span></div></div><Button variant="outline">Update Payment Method</Button></div></CardContent></Card>{/* Billing History */}<Card className="p-0"><CardContent className="p-6"><div className="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row"><h2 className="text-lg font-semibold">Billing History</h2><Button variant="outline" size="sm"><Download className="mr-2 size-4" />Download All</Button></div><div className="space-y-4">{invoices.map((invoice) => (<divkey={invoice.id}className="flex flex-col items-start justify-between gap-3 border-b py-3 last:border-0 sm:flex-row sm:items-center"><div className="flex items-center gap-3"><div className="bg-muted rounded-md p-2"><FileText className="text-muted-foreground size-4" /></div><div><p className="font-medium">{invoice.id}</p><p className="text-muted-foreground text-sm">{invoice.date}</p></div></div><div className="flex items-center gap-4"><Badge variant="outline">{invoice.status}</Badge><span className="font-medium">{invoice.amount}</span><Button variant="ghost" size="sm"><Download className="size-4" /></Button></div></div>))}</div></CardContent></Card></div></div>);}
Faq Sections: center Aligned
import {Accordion,AccordionContent,AccordionItem,AccordionTrigger,} from "@/components/ui/accordion";const faqs = [{question: "Can I cancel at anytime?",answer:"Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.",},{question: "My team has credits. How do we use them?",answer:"Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.",},{question: "How does Acme's pricing work?",answer:"Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.",},{question: "How secure is Acme?",answer:"Protecting the data you trust to Acme is our first priority. This part is really crucial in keeping the project in line to completion.",},{question: "How do I get access to a theme I purchased?",answer:"If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.",},{question: "Upgrade License Type",answer:"There may be times when you need to upgrade your license from the original type you purchased and we have a solution that ensures you can apply your original purchase cost to the new license purchase.",},];export default function CenterAlignedWithActiveBackgroundGray() {return (<><div className="max-w-[85rem] container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32">{/* Title */}<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14"><h2 className="text-2xl font-bold md:text-4xl md:leading-tight">Your questions, answered</h2><p className="mt-1 text-muted-foreground">Answers to the most frequently asked questions.</p></div>{/* End Title */}<div className="max-w-2xl mx-auto"><Accordion type="single" collapsible className="w-full">{faqs.map((faq, index) => (<AccordionItem value={`item-${index}`} key={faq.question}><AccordionTrigger className="text-lg font-semibold text-left">{faq.question}</AccordionTrigger><AccordionContent className="text-muted-foreground text-base">{faq.answer}</AccordionContent></AccordionItem>))}</Accordion></div></div></>);}