ankit-utils

A monorepo UI component library for React — ships Header and Footer components with full theming support via props.

Installation

npm install ankit-utils
# or
pnpm add ankit-utils
# or
yarn add ankit-utils

Peer dependencies: react ^18 || ^19 and react-dom ^18 || ^19 must be installed in your host app.

Usage

Import components

import { Header, Footer } from 'ankit-utils';

<Header />

Renders a top navigation bar.

<Header />

Props

| Prop | Type | Default | Description | |-------------|----------|-------------|------------------------------------| | bgColor | string | #0d0d0d | Background color of the header bar | | textColor | string | white | Color of the logo text and links |

Examples

// Default dark header
<Header />

// Custom brand color
<Header bgColor="#1e3a5f" textColor="#e2e8f0" />

// Light header
<Header bgColor="#ffffff" textColor="#111111" />

<Footer />

Renders a bottom footer bar.

<Footer />

Props

| Prop | Type | Default | Description | |-------------|----------|-------------|---------------------------------| | bgColor | string | #f3f4f6 | Background color of the footer | | textColor | string | #374151 | Color of the footer text |

Examples

// Default light footer
<Footer />

// Dark footer to match header
<Footer bgColor="#0d0d0d" textColor="white" />

// Custom brand
<Footer bgColor="#0d1b2a" textColor="#a0aec0" />

Full example

import { Header, Footer } from 'ankit-utils';

const App = () => (
  <div>
    <Header bgColor="#0d0d0d" textColor="white" />

    <main>
      {/* your page content */}
    </main>

    <Footer bgColor="#f3f4f6" textColor="#374151" />
  </div>
);

Packages

This library is a pnpm workspace monorepo. Components live under packages/:

ankit-utils/
├── packages/
│   ├── header/        →  <Header />
│   └── footer/        →  <Footer />
├── index.ts           →  re-exports all components
└── package.json

Building locally

pnpm build

This runs tsc to compile TypeScript and copies CSS files into dist/ alongside the JS.

License

MIT