@lazydev/ui-dev

A reusable React component library with a consistent design system built on Tailwind CSS.

Features

• Button - Multiple variants (primary, ghost, accent) and sizes
• Header - Sticky navigation with mobile hamburger menu
• Footer - Multi-column footer with logo and links
• Card - Flexible card component for listings/items
• ProfileCard - Agent or team member profile cards
• IconCard - Icon-based feature/category cards
• SearchBar - Location/type search form

Design System

• Colors: Charcoal palette (50-950) + orange accent
• Shadows: arch-soft, arch-medium, arch-hard, arch-glow
• Animations: slide-up, fade-in, scale-in, line-expand
• Typography: DM Sans font family

Installation

npm install @lazydev/ui-dev

Setup

1. Tailwind Config

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  presets: [require('@lazydev/ui-dev/tailwind.config')],
}

2. Styles

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import '@lazydev/ui-dev/styles.css';

3. Use Components

import { Button, Header, Footer, Card } from '@lazydev/ui-dev';
import '@lazydev/ui-dev/styles.css';

export default function Layout() {
  return (
    <>
      <Header
        logo={{ text: "MyBrand", href: "/" }}
        navItems={[
          { label: "Home", href: "/" },
          { label: "About", href: "/about" },
        ]}
        cta={{ label: "Get Started", href: "/contact" }}
      />

      <Card
        title="Beautiful Property"
        image="/image.jpg"
        price={{ amount: 250000, currency: "$" }}
        details={{ bedrooms: 3, bathrooms: 2, size: { value: 150 } }}
        href="/listing/1"
      />

      <Footer
        logo={{ text: "MyBrand", description: "Your brand description" }}
        columns={[
          { title: "Links", links: [{ label: "Home", href: "/" }] },
        ]}
      />
    </>
  );
}

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0
• next >= 14.0.0 (optional, for Next.js-specific features)

License

MIT