@forgeframework/design-blocks

Pre-built page blocks and layout patterns composed from @forgeframework/design-system (shadcn/ui) components.

Part of the Forge Framework — a TypeScript framework for backend microservices and web applications.

Installation

npm install @forgeframework/design-blocks

Usage

import { DashboardLayout } from '@forgeframework/design-blocks/dashboard/dashboard-layout';
import { DashboardHeader } from '@forgeframework/design-blocks/dashboard/dashboard-header';
import { StatsCards } from '@forgeframework/design-blocks/dashboard/stats-cards';
import { DataTableBlock } from '@forgeframework/design-blocks/dashboard/data-table-block';
import { AppSidebar } from './app-sidebar';

const stats: StatsCardData[] = [
  { title: 'Total Revenue', value: '$45,231.89', change: { value: 20.1, trend: 'up' } },
  { title: 'Subscriptions', value: '+2,350', change: { value: 180.1, trend: 'up' } },
  { title: 'Active Users', value: '+12,234', change: { value: 19, trend: 'up' } },
  { title: 'Churn Rate', value: '2.4%', change: { value: -4.5, trend: 'down' } },
];

export default function DashboardPage() {
  return (
    <DashboardLayout sidebar={<AppSidebar />} defaultCollapsed={false}>
      <DashboardHeader
        breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Dashboard' }]}
        user={{ name: 'Deepak Sharma', email: '[email protected]' }}
      />
      <div className="flex flex-col gap-6 p-6">
        <StatsCards cards={stats} columns={4} />
        <DataTableBlock
          data={users}
          columns={columns}
          searchKey="name"
          filterableColumns={[
            {
              id: 'role',
              title: 'Role',
              options: [
                { label: 'Admin', value: 'admin' },
                { label: 'Member', value: 'member' },
              ],
            },
          ]}
        />
      </div>
    </DashboardLayout>
  );
}

Documentation

Full API reference and guides: https://carbonforge.io/framework/docs/design/design-blocks

(Documentation site launching soon.)

License

MIT © Carbon Forge