Shadcn Blocks
Explore free Shadcn UI blocks to speed up your development. Fully customizable, easy to use, and dark mode ready.
Files
<script lang="ts">
import DashboardShell from '$lib/components/dashboard-shell-01/dashboard-shell-01.svelte';
import * as Sidebar from '$lib/components/ui/sidebar';
import { CalendarX2Icon, TriangleAlertIcon, TruckIcon } from '@lucide/svelte';
import type { StatisticsCardData } from '$lib/components/statistics-01.svelte';
import type { EarningData } from '$lib/components/widget-01.svelte';
import type { TransactionItem } from '$lib/components/dashboard-shell-01/data-table-transaction.svelte';
const statisticsCardData: StatisticsCardData[] = [
{
icon: TruckIcon,
value: '42',
title: 'Shipped Orders',
changePercentage: '+18.2%'
},
{
icon: TriangleAlertIcon,
value: '8',
title: 'Damaged Returns',
changePercentage: '-8.7%'
},
{
icon: CalendarX2Icon,
value: '27',
title: 'Missed Delivery Slots',
changePercentage: '+4.3%'
}
];
const earningData: EarningData[] = [
{
img: '/blocks/zipcar.webp',
platform: 'Zipcar',
technologies: 'Vuejs & HTML',
earnings: '-$23,569.26',
progressPercentage: 75
},
{
img: '/blocks/bitbank.webp',
platform: 'Bitbank',
technologies: 'Figma & React',
earnings: '-$12,650.31',
progressPercentage: 25
}
];
const transactionData: TransactionItem[] = [
{
id: '1',
avatar: '/avatars/01.webp',
avatarFallback: 'JA',
name: 'Jack Alfredo',
amount: 316.0,
status: 'paid',
email: 'jack@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '2',
avatar: '/avatars/02.webp',
avatarFallback: 'MG',
name: 'Maria Gonzalez',
amount: 253.4,
status: 'pending',
email: 'maria.g@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '3',
avatar: '/avatars/03.webp',
avatarFallback: 'JD',
name: 'John Doe',
amount: 852.0,
status: 'paid',
email: 'john.doe@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '4',
avatar: '/avatars/04.webp',
avatarFallback: 'EC',
name: 'Emily Carter',
amount: 889.0,
status: 'pending',
email: 'emily.carter@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '5',
avatar: '/avatars/05.webp',
avatarFallback: 'DL',
name: 'David Lee',
amount: 723.16,
status: 'paid',
email: 'david.lee@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '6',
avatar: '/avatars/06.webp',
avatarFallback: 'SP',
name: 'Sophia Patel',
amount: 612.0,
status: 'failed',
email: 'sophia.patel@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '7',
avatar: '/avatars/07.webp',
avatarFallback: 'RW',
name: 'Robert Wilson',
amount: 445.25,
status: 'paid',
email: 'robert.wilson@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '8',
avatar: '/avatars/08.webp',
avatarFallback: 'LM',
name: 'Lisa Martinez',
amount: 297.8,
status: 'processing',
email: 'lisa.martinez@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '9',
avatar: '/avatars/09.png',
avatarFallback: 'MT',
name: 'Michael Thompson',
amount: 756.9,
status: 'paid',
email: 'michael.thompson@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '10',
avatar: '/avatars/10.webp',
avatarFallback: 'AJ',
name: 'Amanda Johnson',
amount: 189.5,
status: 'pending',
email: 'amanda.johnson@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '11',
avatar: '/avatars/11.png',
avatarFallback: 'KB',
name: 'Kevin Brown',
amount: 1024.75,
status: 'paid',
email: 'kevin.brown@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '12',
avatar: '/avatars/12.png',
avatarFallback: 'SD',
name: 'Sarah Davis',
amount: 367.2,
status: 'failed',
email: 'sarah.davis@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '13',
avatar: '/avatars/13.png',
avatarFallback: 'CG',
name: 'Christopher Garcia',
amount: 598.45,
status: 'processing',
email: 'christopher.garcia@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '14',
avatar: '/avatars/14.png',
avatarFallback: 'JR',
name: 'Jennifer Rodriguez',
amount: 821.3,
status: 'paid',
email: 'jennifer.rodriguez@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '15',
avatar: '/avatars/15.webp',
avatarFallback: 'DM',
name: 'Daniel Miller',
amount: 156.75,
status: 'pending',
email: 'daniel.miller@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '16',
avatar: '/avatars/16.webp',
avatarFallback: 'NW',
name: 'Nicole White',
amount: 934.1,
status: 'paid',
email: 'nicole.white@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '17',
avatar: '/avatars/17.webp',
avatarFallback: 'AL',
name: 'Anthony Lopez',
amount: 412.85,
status: 'failed',
email: 'anthony.lopez@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '18',
avatar: '/avatars/18.webp',
avatarFallback: 'MH',
name: 'Michelle Harris',
amount: 675.5,
status: 'processing',
email: 'michelle.harris@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '19',
avatar: '/avatars/19.webp',
avatarFallback: 'JC',
name: 'James Clark',
amount: 289.95,
status: 'paid',
email: 'james.clark@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '20',
avatar: '/avatars/20.webp',
avatarFallback: 'RL',
name: 'Rachel Lewis',
amount: 1156.25,
status: 'pending',
email: 'rachel.lewis@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '21',
avatar: '/avatars/21.webp',
avatarFallback: 'TY',
name: 'Thomas Young',
amount: 543.6,
status: 'paid',
email: 'thomas.young@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '22',
avatar: '/avatars/22.webp',
avatarFallback: 'SB',
name: 'Stephanie Brown',
amount: 789.3,
status: 'processing',
email: 'stephanie.brown@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '23',
avatar: '/avatars/23.webp',
avatarFallback: 'BM',
name: 'Brandon Moore',
amount: 425.75,
status: 'failed',
email: 'brandon.moore@shadcnstudio.com',
paidBy: 'visa'
},
{
id: '24',
avatar: '/avatars/24.webp',
avatarFallback: 'KT',
name: 'Kelly Taylor',
amount: 1203.5,
status: 'paid',
email: 'kelly.taylor@shadcnstudio.com',
paidBy: 'mastercard'
},
{
id: '25',
avatar: '/avatars/25.webp',
avatarFallback: 'MA',
name: 'Mark Anderson',
amount: 356.2,
status: 'pending',
email: 'mark.anderson@shadcnstudio.com',
paidBy: 'visa'
}
];
</script>
<div class="flex min-h-dvh w-full">
<Sidebar.Provider>
<DashboardShell {statisticsCardData} {earningData} {transactionData} />
</Sidebar.Provider>
</div>
Dashboard Shell 1
dashboard-shell-01
Files
<script lang="ts">
import ApplicationShell from '$lib/components/application-shell-01/application-shell-01.svelte';
import * as Sidebar from '$lib/components/ui/sidebar';
</script>
<div class="flex min-h-dvh w-full">
<Sidebar.Provider>
<ApplicationShell />
</Sidebar.Provider>
</div>
Application Shell 1
application-shell-01
Files
<script lang="ts">
import SalesMetricsCard from '$lib/components/charts-01.svelte';
</script>
<div class="py-8 sm:py-16 lg:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex justify-center">
<SalesMetricsCard class="w-full max-w-200" />
</div>
</div>
</div>
Charts 1
charts-01
Files
<script lang="ts">
import TotalEarningCard from '$lib/components/widget-01.svelte';
const earningData = [
{
img: '/blocks/zipcar.webp',
platform: 'Zipcar',
technologies: 'Vuejs & HTML',
earnings: '-$23,569.26',
progressPercentage: 75
},
{
img: '/blocks/bitbank.webp',
platform: 'Bitbank',
technologies: 'Figma & React',
earnings: '-$12,650.31',
progressPercentage: 25
},
{
img: '/blocks/aviato.webp',
platform: 'Aviato',
technologies: 'HTML & Angular',
earnings: '-$55,699.50',
progressPercentage: 50
}
];
</script>
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-8 sm:py-16">
<div class="flex justify-center">
<TotalEarningCard
title="Total Earning"
earning={24650}
trend="up"
percentage={10}
comparisonText="Compare to last year ($84,325)"
{earningData}
class="w-full max-w-100"
/>
</div>
</div>
Widget 1
widget-01
Files
<script lang="ts">
import ProductInsightsCard from '$lib/components/widget-02.svelte';
</script>
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-8 sm:py-16">
<div class="flex justify-center">
<ProductInsightsCard class="w-full max-w-85.5" />
</div>
</div>
Widget 2
widget-02
Files
<script lang="ts">
import { CalendarX2Icon, Clock8Icon, TriangleAlertIcon, TruckIcon } from '@lucide/svelte';
import StatisticsCard from '$lib/components/statistics-01.svelte';
const statisticsCardData = [
{
icon: TruckIcon,
value: '42',
title: 'Shipped Orders',
changePercentage: '+18.2%'
},
{
icon: TriangleAlertIcon,
value: '8',
title: 'Damaged Returns',
changePercentage: '-8.7%'
},
{
icon: CalendarX2Icon,
value: '27',
title: 'Missed Delivery Slots',
changePercentage: '+4.3%'
},
{
icon: Clock8Icon,
value: '13',
title: 'Late Deliveries',
changePercentage: '-2.5%'
}
];
</script>
<div class="py-8 sm:py-16 lg:py-24">
<div class="mx-auto grid max-w-7xl gap-4 px-4 sm:grid-cols-2 sm:px-6 lg:grid-cols-4 lg:px-8">
{#each statisticsCardData as card}
<StatisticsCard
icon={card.icon}
title={card.title}
value={card.value}
changePercentage={card.changePercentage}
/>
{/each}
</div>
</div>
Statistics 1
statistics-01
Files
<script lang="ts">
import PlanDialog from '$lib/components/dashboard-dialog-01/dashboard-dialog-01.svelte';
const plansData = [
{
id: '1',
title: 'Basic plan',
price: 10,
description: 'Includes 20GB individual data.',
features: ['32+ integrations', 'Basic reporting', '20GB individual data', 'Basic support']
},
{
id: '2',
title: 'Starter Package',
price: 12,
description: 'Comes with 512GB personal data.',
features: [
'35+ integrations',
'Essential reporting features',
'512GB personal data included',
'Standard support services'
]
}
];
</script>
<div class="flex h-dvh items-start justify-center p-8">
<PlanDialog open data={plansData} />
</div>
Dashboard Dialog 1
dashboard-dialog-01
Files
<script lang="ts">
import LanguageDropdown from '$lib/components/dashboard-dropdown-01/dashboard-dropdown-01.svelte';
</script>
<div class="flex h-70 items-start justify-center p-8">
<LanguageDropdown open align="center" />
</div>
Dashboard Dropdown 1
dashboard-dropdown-01
Files
<script lang="ts">
import ProfileDropdown from '$lib/components/dashboard-dropdown-02/dashboard-dropdown-02.svelte';
</script>
<div class="flex h-132 items-start justify-center p-8">
<ProfileDropdown open align="center" />
</div>
Dashboard Dropdown 2
dashboard-dropdown-02
Files
<script lang="ts">
import DashboardSidebar from '$lib/components/dashboard-sidebar-01.svelte';
import * as Sidebar from '$lib/components/ui/sidebar';
import * as Card from '$lib/components/ui/card';
</script>
<div class="flex min-h-dvh w-full">
<Sidebar.Provider>
<DashboardSidebar />
<div class="flex flex-1 flex-col">
<header
class="sticky top-0 z-50 flex h-13.75 items-center justify-between gap-6 border-b bg-card px-4 py-2 sm:px-6"
>
<Sidebar.Trigger class="[&_svg]:!size-5" />
</header>
<main class="size-full flex-1 px-4 py-6 sm:px-6">
<Card.Root class="h-250">
<Card.Content class="h-full">
<div
class="h-full rounded-md border border-card-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--card-foreground)10%,transparent),color-mix(in_oklab,var(--card-foreground)10%,transparent)_1px,var(--card)_2px,var(--card)_15px)]"
></div>
</Card.Content>
</Card.Root>
</main>
<footer class="h-10 border-t bg-card px-4 sm:px-6">
<div
class="h-full border-card-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--card-foreground)10%,transparent),color-mix(in_oklab,var(--card-foreground)10%,transparent)_1px,var(--card)_2px,var(--card)_15px)]"
></div>
</footer>
</div>
</Sidebar.Provider>
</div>
Dashboard Sidebar 1
dashboard-sidebar-01
Files
<script lang="ts">
import SidebarHeader from '$lib/components/dashboard-header-01.svelte';
import * as Card from '$lib/components/ui/card';
import * as Sidebar from '$lib/components/ui/sidebar';
</script>
<div class="flex min-h-dvh w-full">
<Sidebar.Provider>
<Sidebar.Root>
<div
class="m-6 h-full rounded-md border border-sidebar-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--sidebar-foreground)10%,transparent),color-mix(in_oklab,var(--sidebar-foreground)10%,transparent)_1px,var(--sidebar)_2px,var(--sidebar)_15px)]"
></div>
</Sidebar.Root>
<div class="flex flex-1 flex-col">
<SidebarHeader />
<main class="size-full flex-1 px-4 py-6 sm:px-6">
<Card.Root class="h-250">
<Card.Content class="h-full">
<div
class="h-full rounded-md border border-card-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--card-foreground)10%,transparent),color-mix(in_oklab,var(--card-foreground)10%,transparent)_1px,var(--card)_2px,var(--card)_15px)]"
></div>
</Card.Content>
</Card.Root>
</main>
<footer class="h-10 border-t bg-card px-4 sm:px-6">
<div
class="h-full border-card-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--card-foreground)10%,transparent),color-mix(in_oklab,var(--card-foreground)10%,transparent)_1px,var(--card)_2px,var(--card)_15px)]"
></div>
</footer>
</div>
</Sidebar.Provider>
</div>
Dashboard Header 1
dashboard-header-01
Files
<script lang="ts">
import SidebarFoorter from '$lib/components/dashboard-footer-01.svelte';
import * as Card from '$lib/components/ui/card';
import * as Sidebar from '$lib/components/ui/sidebar';
</script>
<div class="flex min-h-dvh w-full">
<Sidebar.Provider>
<Sidebar.Root>
<div
class="m-6 h-full rounded-md border border-sidebar-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--sidebar-foreground)10%,transparent),color-mix(in_oklab,var(--sidebar-foreground)10%,transparent)_1px,var(--sidebar)_2px,var(--sidebar)_15px)]"
></div>
</Sidebar.Root>
<div class="flex flex-1 flex-col">
<header
class="sticky top-0 z-50 flex h-13.75 items-center justify-between gap-6 border-b bg-card px-4 py-2 sm:px-6"
>
<Sidebar.Trigger class="[&_svg]:!size-5" />
</header>
<main class="size-full flex-1 px-4 py-6 sm:px-6">
<Card.Root class="h-250">
<Card.Content class="h-full">
<div
class="h-full rounded-md border border-card-foreground/10 bg-[repeating-linear-gradient(45deg,color-mix(in_oklab,var(--card-foreground)10%,transparent),color-mix(in_oklab,var(--card-foreground)10%,transparent)_1px,var(--card)_2px,var(--card)_15px)]"
></div>
</Card.Content>
</Card.Root>
</main>
<SidebarFoorter />
</div>
</Sidebar.Provider>
</div>
Dashboard Footer 1
dashboard-footer-01
