@hazemazzam/ui-components-kit

Reusable UI primitives with two usage modes:

• Package mode: import components from npm.
• Shadcn mode: copy source files into your app and edit them freely.

Install

npm i @hazemazzam/ui-components-kit

Use as package

import { PageLayout, PageHeader, PageTitle, PageBody } from "@hazemazzam/ui-components-kit";

Install editable source (shadcn style)

npx @hazemazzam/ui-components-kit add page-layout

This writes:

src/components/ui/page-layout.tsx

You can also install an editable sidebar wrapper that keeps using your app's shadcn sidebar primitives:

npx @hazemazzam/ui-components-kit add app-sidebar

This writes:

src/components/ui/app-sidebar.tsx

You can edit that file in your project as needed.

Sidebar trigger

The page-layout package components do not hard-depend on your app sidebar component. Pass your own trigger via sidebarTrigger:

<PageHeader sidebarTrigger={<SidebarTrigger />}>
  <PageTitle>Products</PageTitle>
</PageHeader>