@zaplof/ui
v0.1.4
Published
A modern, lightweight React + Tailwind CSS component library
Maintainers
mooojnReadme
@zaplof/ui
A modern, lightweight React + Tailwind CSS component library.
Requirements
- React 18+
- Tailwind CSS (v3 or v4)
- TypeScript (optional but recommended)
Installation
npm install @zaplof/ui
# or
pnpm add @zaplof/ui
# or
yarn add @zaplof/uiSetup
Next.js (Tailwind v4)
Tailwind v4 in Next.js uses a CSS-based config. No tailwind.config.ts needed.
1. Install the package
npm install @zaplof/ui2. Add @source to your globals.css
@import "tailwindcss";
@source "../node_modules/@zaplof/ui/dist";3. Use components
import { Header } from "@zaplof/ui";
export default function Page() {
return <Header />;
}Next.js (Tailwind v3)
1. Install the package
npm install @zaplof/ui2. Update tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./node_modules/@zaplof/ui/dist/**/*.{js,mjs}", // ← add this
],
theme: {
extend: {},
},
plugins: [],
};
export default config;3. Use components
import { Header } from "@zaplof/ui";
export default function Page() {
return <Header />;
}React + Vite
1. Install the package and Tailwind
npm install @zaplof/ui
npm install -D tailwindcss @tailwindcss/vite2. Add Tailwind plugin to vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});3. Add to your index.css
@import "tailwindcss";
@source "../node_modules/@zaplof/ui/dist";4. Use components
import { Header } from "@zaplof/ui";
function App() {
return <Header />;
}Components
<Header />
A fully responsive header with dark mode, mobile menu, announcement bar, and CTA buttons. All props are optional — works great with zero configuration.
import { Header } from "@zaplof/ui";
// Zero config — renders with smart defaults
<Header />
// Full example
<Header
brand="MyApp"
announcement="v2.0 is out! See what's new"
announcementHref="/changelog"
navLinks={[
{ label: "Docs", href: "/docs" },
{ label: "Components", href: "/components" },
{ label: "Pricing", href: "/pricing" },
]}
secondaryCtaLabel="Sign in"
secondaryCtaHref="/login"
ctaLabel="Get Started"
ctaHref="/signup"
sticky
bordered
/>Header Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Zaplof" | Brand name shown on the left |
| logoSrc | string | — | Image URL for logo (overrides text brand) |
| navLinks | NavLink[] | Docs, Components, Examples, Blog | Navigation links |
| ctaLabel | string | "Get Started" | Primary CTA button text |
| ctaHref | string | "#" | Primary CTA button link |
| secondaryCtaLabel | string | — | Secondary button text (hidden if not set) |
| secondaryCtaHref | string | "#" | Secondary button link |
| onCtaClick | () => void | — | Click handler for primary CTA |
| onSecondaryCtaClick | () => void | — | Click handler for secondary CTA |
| sticky | boolean | true | Stick header to top on scroll |
| bordered | boolean | true | Show bottom border |
| transparent | boolean | false | Transparent background (for hero sections) |
| announcement | string | — | Top announcement bar text |
| announcementHref | string | "#" | Announcement bar link |
| className | string | — | Extra classes for custom overrides |
NavLink Type
interface NavLink {
label: string;
href: string;
}Dark Mode
All components support dark mode out of the box via Tailwind's dark: variant. Just make sure dark mode is enabled in your project:
Tailwind v4 — enabled by default.
Tailwind v3 — add to your config:
const config = {
darkMode: "class",
// ...
};Then toggle dark mode by adding the dark class to your <html> element.
TypeScript
All components ship with full TypeScript types. You can import types directly:
import type { HeaderProps, NavLink } from "@zaplof/ui";License
MIT © Zaplof