Introducing New Version of Components V3

Reusable Blocks for the Web

A collection of sleek, customizable blocks to speed up your workflow. Drop them into any React app and ship faster.

Files
components/dashboard-1/dashboard-1.tsx
'use client'
import { SidebarInset, SidebarProvider } from '@gentleduck/registry-ui-duckui/sidebar'
import { AppSidebar } from './components/app-sidebar'
import { ChartAreaInteractive } from './components/chart-area-interactive'
import { DataTable } from './components/data-table'
import { SectionCards } from './components/section-cards'
import { SiteHeader } from './components/site-header'
import data from './data.json'

export function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <SiteHeader />
        <div className="flex flex-1 flex-col">
          <div className="@container/main flex flex-1 flex-col gap-2">
            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
              <SectionCards />
              <div className="px-4 lg:px-6">
                <ChartAreaInteractive />
              </div>
              <DataTable data={data} />
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
dashboard-1