dummy-cms-ui

A minimal CMS/admin dashboard component library built with React + TypeScript.

Proof-of-concept package for testing npm publishing, component structure, and library builds.

Components

| Component | Description | |-----------|-------------| | Button | Clickable button with variants, sizes, and loading state | | Card | Container with optional title and footer slots | | Sidebar | Collapsible navigation sidebar |

Installation

npm install dummy-cms-ui

Import the styles once at the root of your app:

import 'dummy-cms-ui/styles'

Usage

Button

import { Button } from 'dummy-cms-ui'

<Button variant="primary" size="md" onClick={() => console.log('clicked')}>
  Save Changes
</Button>

<Button variant="danger" loading>Deleting…</Button>

Props

| Prop | Type | Default | |-----------|----------------------------------------|-------------| | variant | 'primary' \| 'secondary' \| 'danger' | 'primary' | | size | 'sm' \| 'md' \| 'lg' | 'md' | | loading | boolean | false | | disabled | boolean | false |

Card

import { Card } from 'dummy-cms-ui'

<Card
  title="Total Posts"
  footer={<Button size="sm" variant="secondary">View All</Button>}
>
  <p>142 posts published</p>
</Card>

Props

| Prop | Type | Default | |-----------|-------------------|---------| | title | string | — | | footer | React.ReactNode | — | | className | string | — |

Sidebar

import { Sidebar } from 'dummy-cms-ui'
import type { SidebarItem } from 'dummy-cms-ui'

const items: SidebarItem[] = [
  { id: 'dashboard', label: 'Dashboard', icon: '🏠', onClick: () => navigate('/') },
  { id: 'posts',     label: 'Posts',     icon: '📝', onClick: () => navigate('/posts') },
]

<Sidebar items={items} activeId="dashboard" header="My CMS" />

Props

| Prop | Type | Default | |-----------|-------------------|---------| | items | SidebarItem[] | — | | activeId | string | — | | header | React.ReactNode | — | | collapsed | boolean | false |

Development

# Build the library (ESM + CJS + types)
npm run build

# Run the demo app with live source aliasing (no build step needed)
cd demo && npm install && npm run dev

Publishing

# prepublishOnly runs the build automatically before publish
npm publish

License

MIT