Haber UI

A modern, customizable UI component library for Next.js applications, inspired by shadcn/ui.

Usage

Add components to your project:

# Add the button component
npx haber-ui add haber-button

This will:

1. Copy the component to your project
2. Add any required dependencies
3. Allow you to customize the code

Available Components

Button

npx haber-ui add haber-button

import { Button } from "@/components/ui/haber-button";

export default function Example() {
  return (
    <HaberButton variant="primary" size="md">
      Click me
    </HaberButton>
  );
}

Customization

The component will be added to your project's src/components/ui directory. You can customize it however you want:

// src/components/ui/haber-button.tsx
const buttonVariants = cva(
  "rounded-md font-medium focus:outline-none", // Customize the base styles
  {
    variants: {
      variant: {
        primary: "bg-blue-500 text-white", // Change the variants
        secondary: "bg-gray-200 text-gray-800",
      },
      // Add your own variants
    },
  }
);

Requirements

• React 18 or later
• Next.js 13 or later
• Tailwind CSS
• TypeScript (recommended)

Development

# Install dependencies
pnpm install

# Build the package
pnpm build

# Build the CLI
pnpm build:cli

License

MIT © Marco Haber