@peter-awad/luca-ui

A collection of reusable UI components built on top of shadcn/ui and Radix UI primitives.

Installation

npm install @peter-awad/luca-ui

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom clsx tailwind-merge

Additional dependencies that should be installed:

npm install @radix-ui/react-avatar @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot class-variance-authority date-fns lucide-react motion react-day-picker react-hook-form react-use-measure

Usage

Import Components

import { CustomBadge, CustomAvatar, CustomInput } from '@peter-awad/luca-ui';

CustomBadge

A customizable badge component with multiple variants.

import { CustomBadge } from '@peter-awad/luca-ui';

function App() {
  return (
    <CustomBadge label="Default" variant="default" />
    <CustomBadge label="Completed" variant="completed" />
    <CustomBadge label="Upcoming" variant="upcomming" />
    <CustomBadge label="Cancelled" variant="cancelled" />
    <CustomBadge label="Ongoing" variant="ongoing" />
  );
}

CustomAvatar

An avatar component that displays user images or initials.

import { CustomAvatar } from '@peter-awad/luca-ui';

function App() {
  return (
    <CustomAvatar 
      name="John Doe" 
      imageUrl="/avatar.jpg" 
      size="sm" 
    />
  );
}

CustomInput

A form input component with validation support.

import { CustomInput } from '@peter-awad/luca-ui';
import { useForm } from 'react-hook-form';

function MyForm() {
  const form = useForm();
  
  return (
    <form>
      <CustomInput
        fieldName="email"
        label="Email"
        placeholder="Enter your email"
        type="email"
        formItemClassName="mb-4"
      />
    </form>
  );
}

CustomSelect

A select dropdown component.

import { CustomSelect } from '@peter-awad/luca-ui';

function MyForm() {
  const form = useForm();
  
  return (
    <form>
      <CustomSelect
        fieldName="country"
        label="Country"
        placeholder="Select a country"
        items={[
          { label: 'USA', value: 'usa' },
          { label: 'UK', value: 'uk' }
        ]}
      />
    </form>
  );
}

CustomCalendar

A date picker component.

import { CustomCalender } from '@peter-awad/luca-ui';

function MyForm() {
  const form = useForm();
  
  return (
    <form>
      <CustomCalender
        fieldName="date"
        label="Pick a date"
        placeholder="Select date"
      />
    </form>
  );
}

CustomCounterButton

A counter component with increment/decrement buttons.

import { CustomCounterButton } from '@peter-awad/luca-ui';

function App() {
  return <CustomCounterButton />;
}

Base Components

You can also import the base UI components if you need more flexibility:

import { Badge, Avatar, Input, Button, Calendar } from '@peter-awad/luca-ui';

Tailwind CSS Setup

This library uses Tailwind CSS. Make sure to configure it in your project:

1. Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind:

npx tailwindcss init

3. Configure your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@peter-awad/luca-ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Author

peter awad

License

MIT