\n Anna Thompson\n \n anna@example.com\n \n

\n \n \n }\n />\n \n \n \n Profile\n \n \n \n Settings\n \n \n \n Logout\n \n \n \n \n \n \n \n \n );\n}\n","chart.tsx","import { Card, CardBody, CardHeader, CardTitle, CardHeaderAction } from 'components/selia/card';\nimport { Select, SelectPopup, SelectItem, SelectList, SelectTrigger, SelectValue } from 'components/selia/select';\nimport { cn } from 'lib/utils';\nimport { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { data } from './data';\n\nexport function Chart() {\n return (\n \n \n Sales\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","data.ts","export const data = [\n {\n name: 'Mon',\n orders: 800,\n },\n {\n name: 'Tue',\n orders: 1250,\n },\n {\n name: 'Wed',\n orders: 1120,\n },\n {\n name: 'Thu',\n orders: 1500,\n },\n {\n name: 'Fri',\n orders: 1850,\n },\n {\n name: 'Sat',\n orders: 1420,\n },\n {\n name: 'Sun',\n orders: 1700,\n },\n];\n","layout.tsx","import { useState, useEffect } from 'react';\nimport { cn } from 'lib/utils';\nimport { Button } from 'components/selia/button';\nimport { Heading } from 'components/selia/heading';\nimport { SidebarCloseIcon, SidebarOpenIcon } from 'lucide-react';\n\nexport function Layout({\n children,\n sidebar,\n}: {\n children: React.ReactNode;\n sidebar: React.ReactNode;\n}) {\n const [sidebarOpen, setSidebarOpen] = useState(true);\n\n useEffect(() => {\n const windowResize = () => {\n if (window.innerWidth < 1024) {\n setSidebarOpen(false);\n } else {\n setSidebarOpen(true);\n }\n };\n\n windowResize();\n window.addEventListener('resize', windowResize);\n return () => window.removeEventListener('resize', windowResize);\n }, []);\n\n function handleSidebarOpen() {\n setSidebarOpen(!sidebarOpen);\n }\n\n return (\n <>\n \n \n {sidebar}\n \n \n \n \n {sidebarOpen ? : }\n \n Dashboard\n \n \n {children}\n \n \n \n );\n}\n","import { Layout } from './layout';\nimport { AppSidebar } from './app-sidebar';\nimport { StatCard } from './stat-card';\nimport { Chart } from './chart';\nimport { ArrowRightCircleIcon, ArrowRightIcon, Package2Icon, ShoppingBagIcon, TagsIcon, Users2Icon } from 'lucide-react';\nimport { Badge } from 'components/selia/badge';\nimport { Button } from 'components/selia/button';\nimport { Card, CardBody, CardFooter, CardHeader, CardHeaderAction, CardTitle } from 'components/selia/card';\nimport { Text } from 'components/selia/text';\nimport { Stack } from 'components/selia/stack';\nimport { Item, ItemContent, ItemDescription, ItemMedia, ItemMeta, ItemTitle } from 'components/selia/item';\nimport { Separator } from 'components/selia/separator';\nimport { Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow } from 'components/selia/table';\n\nexport default function Dashboard() {\n return (\n }>\n

\n }\n title=\"Total Sales\"\n value=\"$12,340\"\n change=\"+8.2%\"\n changeType=\"increase\"\n />\n }\n title=\"Customers\"\n value=\"3,210\"\n change=\"+4.1%\"\n changeType=\"increase\"\n />\n }\n title=\"Orders\"\n value=\"1,520\"\n change=\"-2.3%\"\n changeType=\"decrease\"\n />\n }\n title=\"Revenue\"\n value=\"$24,580\"\n change=\"+6.9%\"\n changeType=\"increase\"\n />\n

\n \n

\n \n \n Best Selling\n \n \n \n } variant=\"plain\">\n \n \n \n \n Golden Beats Headphones\n $120.00\n \n 40 sales\n \n \n } variant=\"plain\">\n \n \n \n \n Polaroid Pronto 600 Instant Camera\n $730.00\n \n 40 sales\n \n \n } variant=\"plain\">\n \n \n \n \n Black Leather Strap Smartwatch\n $600.00\n \n 12 sales\n \n \n } variant=\"plain\">\n \n \n \n \n DJI Remote Controller\n $350.00\n \n 21 sales\n \n \n } variant=\"plain\">\n \n \n \n \n PUMA Suede Classic Grey Sneakers\n $120.00\n \n 28 sales\n \n \n \n \n \n \n \n

\n \n \n Recent Orders\n \n \n \n \n \n \n \n \n \n Order ID\n Customer\n Date\n Total\n Status\n \n \n \n \n \n \n 5678\n \n \n \n Jessica Pearson\n \n \n 2025-06-01\n \n \n $532.44\n \n \n \n Completed\n \n \n \n \n \n \n 5683\n \n \n \n Michael Ross\n \n \n 2025-06-02\n \n \n $89.99\n \n \n \n Pending\n \n \n \n \n \n \n 5690\n \n \n \n Rachel Zane\n \n \n 2025-06-04\n \n \n $250.00\n \n \n \n Canceled\n \n \n \n \n \n \n 5765\n \n \n \n Harvey Specter\n \n \n 2025-06-06\n \n \n $1,732.10\n \n \n \n Completed\n \n \n \n \n \n \n 5892\n \n \n \n Donna Paulsen\n \n \n 2025-06-08\n \n \n $423.67\n \n \n \n Processing\n \n \n \n \n \n \n 5921\n \n \n \n Larry Litt\n \n \n 2025-06-09\n \n \n $205.49\n \n \n \n Pending\n \n \n \n \n \n \n 6002\n \n \n \n Katrina Bennett\n \n \n 2025-06-10\n \n \n $1,225.00\n \n \n \n Completed\n \n \n \n \n

\n \n \n \n \n );\n}\n","stat-card.tsx","import { Card, CardBody } from 'components/selia/card';\nimport { IconBox } from 'components/selia/icon-box';\nimport { Heading } from 'components/selia/heading';\nimport { Text } from 'components/selia/text';\nimport { Badge } from 'components/selia/badge';\n\nexport function StatCard({\n icon,\n title,\n value,\n change,\n changeType,\n}: {\n icon: React.ReactNode;\n title: string;\n value: string;\n change: string;\n changeType: 'increase' | 'decrease';\n}) {\n return (\n \n \n \n {icon}\n \n \n {title}\n \n {value}\n

\n \n {change}\n \n \n {changeType === 'increase'\n ? 'Compared to last month'\n : 'Compared to last week'}\n \n

\n \n \n );\n}\n","actionData","errors"]

Build Faster with Pre-Built Blocks