@your-home-ui/react v0.4.2

@your-home-ui/react

A comprehensive React component library for building modern real estate interfaces, crafted by Your Next Home.

Installation

npm install @your-home-ui/react
# or
yarn add @your-home-ui/react
# or
pnpm add @your-home-ui/react

Requirements

• React 18 or higher
• Node.js 18.18.0 or higher
• Tailwind CSS

Components

Accordion

A collapsible content panel for organizing information.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@your-home-ui/react";

<Accordion>
  <AccordionItem>
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
</Accordion>

Avatar

A component for displaying user profile images with fallback support.

Properties:

• src: Image source URL
• alt: Alternative text (minimum 2 words for initials)
• size: "sm" | "md" | "lg"
• className: Additional CSS classes

Badge

A small status indicator component.

Variants:

• default
• secondary
• destructive
• success
• outline

Button

A versatile button component with multiple variants and sizes.

Variants:

• default
• secondary
• destructive
• save
• super
• outline
• ghost
• link

Sizes:

• sm
• default
• lg
• icon

Card

A container component for displaying content in a box format.

Components:

• Card
• CardHeader
• CardTitle
• CardDescription
• CardContent
• CardFooter

Variants:

• default
• secondary
• destructive
• outline
• success

Shadow options:

• none
• sm
• md
• lg
• xl
• 2xl

Checkbox

A form input component for boolean selections.

Features:

• Custom check icon support
• Custom background color
• Optional outline styling

DateTimePicker

A component for selecting dates and times.

Form

A form component with responsive grid layout support.

Features:

• Loading state
• Breakpoint-based columns
• Form groups

Input

A text input component with label support.

InputOTP

A one-time password input component with individual character slots.

Loading

A loading spinner component with customizable sizes and messages.

Sizes:

• sm
• md
• lg

Modal

A dialog component for displaying content in an overlay.

Features:

• Custom triggers
• Header with title and description
• Footer with action buttons
• Customizable styling

Pagination

A navigation component for handling page-based data.

Popover

A floating content container triggered by user interaction.

Select

A dropdown selection component.

Skeleton

A placeholder loading component.

Features:

• Customizable dimensions
• Animation support
• Custom styling options

Table

A data table component with sorting and empty state support.

Features:

• Custom column definitions
• Empty state customization
• Responsive design

Toast

A notification component for displaying temporary messages.

Features:

• Multiple positions
• Auto-close functionality
• Theme support

Tooltip

A component for displaying additional information on hover.

Usage

import { Button, Card, Input } from "@your-home-ui/react";

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Login</CardTitle>
        <CardDescription>Enter your credentials</CardDescription>
      </CardHeader>
      <CardContent>
        <Input placeholder="Email" />
        <Input type="password" placeholder="Password" />
      </CardContent>
      <CardFooter>
        <Button>Sign In</Button>
      </CardFooter>
    </Card>
  );
}

Contributing

Please read our contributing guide before submitting pull requests.

License

MIT © Your Next Home

Authors

• Timothy Mugo timothymugo@yournexthome.co.ke
• Samuel Senerwa samuelsenerwa@gmail.com