@meristem/ui-navbar

A small, reusable React Navbar component library built with TypeScript, Tailwind CSS and Framer Motion.

This package exports a single UI component — Navbar — designed for inclusion into React apps where react and react-dom are provided by the host app.

Install

Install from npm (example):

npm install @meristem/ui-navbar
# or
yarn add @meristem/ui-navbar

Note: react and react-dom are peer-dependencies and must be installed in the consuming project.

Peer dependencies

• react >= 17
• react-dom >= 17

Make sure your project provides these. Example:

npm install react react-dom

Usage

Basic usage in a React app:

import React from "react";
import { Navbar } from "@meristem/ui-navbar";
import "@meristem/ui-navbar/dist/assets/ui-navbar.css";

export default function App() {
  return (
    <div>
      <Navbar />
      {/* rest of app */}
    </div>
  );
}

Notes on styling:

• This library uses Tailwind CSS utility classes for layout and styling. The published build contains compiled CSS if the library is built with PostCSS/Tailwind configured — however, if you consume the library's raw source (or run the dev server locally) make sure your app has Tailwind configured or that you import the library's CSS.
• The repository's entry imports ./index.css from src/index.tsx; if you consume the source directly, ensure the correct CSS file is present or update the import to your preferred stylesheet.

Development (local)

Run the Vite dev server to preview the component locally:

npm run dev
# or
yarn dev

Build (library output)

Build the library bundle (creates dist/):

npm run build
# or
yarn build

After build you'll find files in dist/ (ES and UMD builds) and TypeScript declarations at dist/types.

Files & important notes for maintainers

• Entry: src/index.tsx — re-exports Navbar from src/components/Navbar.tsx.
• Main component: src/components/Navbar.tsx — uses Framer Motion and lucide-react icons.
• Assets: src/assets/index.ts — re-exports image assets used by components.
• Build config: vite.config.ts (note: currently points to src/index.ts while the repo exposes src/index.tsx; confirm or fix before editing build entry).
• Type declarations: tsconfig.json writes them to dist/types.

Contributing

Small PRs are welcome. Run tests/type-check locally before opening PRs:

npx tsc --noEmit
npm run build

License

MIT