@tunjiadeyemi/ui

A collection of reusable React UI components built with TypeScript.

Storybook

Explore all components in Storybook:

https://69a67d791bd8666f2b32dd2d-ujpylcgcxt.chromatic.com/

Installation

npm install @tunjiadeyemi/ui framer-motion lucide-react

or

yarn add @tunjiadeyemi/ui framer-motion lucide-react

Quick Start

Import styles once (for example in main.tsx or App.tsx):

import '@tunjiadeyemi/ui/styles.css';

Use the components:

import { useState } from 'react';
import { Modal, Input, Skeleton, Accordion, Rating, ScrollToTop } from '@tunjiadeyemi/ui';

function App() {
  const [showModal, setShowModal] = useState(false);
  const [email, setEmail] = useState('');

  return (
    <>
      <ScrollToTop />

      <Input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
        validate
      />

      <Accordion
        items={[
          { question: 'What is this?', answer: 'A reusable UI library.' },
          { question: 'Does it support TypeScript?', answer: 'Yes.' }
        ]}
      />

      <Rating rating={4} total={5} />
      <Skeleton width="200px" height="20px" animation="pulse" />

      <button onClick={() => setShowModal(true)}>Open Modal</button>
      <Modal
        showModal={showModal}
        onClose={() => setShowModal(false)}
        revealMode="fade"
        className="bg-white p-8 rounded-lg max-w-md"
      >
        <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
        <p>Modal content goes here</p>
      </Modal>
    </>
  );
}

Components

Modal

Flexible modal component with multiple reveal animations.

Props

• children: React.ReactNode
• className?: string
• revealMode?: 'fade' | 'slide-right' | 'slide-bottom' (default: 'fade')
• showModal?: boolean (default: true)
• onClose?: () => void
• isDrag?: boolean (default: false)

<Modal
  showModal
  onClose={() => console.log('Modal closed')}
  revealMode="slide-bottom"
  isDrag
  className="bg-white p-6 rounded-lg"
>
  <h2>Your content</h2>
</Modal>

Input

Customizable input with validation, password visibility toggle, and OTP resend support.

Props

• type?: 'password' | 'otp' | 'text' | 'email' | 'number'
• value?: string
• onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
• onOtpClick?: () => void
• placeholder?: string
• validate?: boolean (default: false)
• minLength?: number
• maxLength?: number
• errorMessage?: string
• className?: string
• backgroundColor?: string (default: '#1F1F23')
• borderColor?: string (default: '#6B2CE9')
• textColor?: string (default: 'white')
• borderRadius?: string (default: '10px')
• height?: string (default: '40px')
• width?: string (default: '100%')
• eyeIcon?: React.ReactNode
• eyeClosedIcon?: React.ReactNode

<Input
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="Enter your email"
  validate
  errorMessage="Please enter a valid email"
/>

Skeleton

Loading placeholder component with shape variants and animation options.

Props

• className?: string
• variant?: 'text' | 'circular' | 'rectangular' (default: 'rectangular')
• width?: string | number (default: '100%')
• height?: string | number (default: '100%')
• animation?: 'pulse' | 'wave' | 'none' (default: 'pulse')

<Skeleton variant="text" width="200px" height="20px" />
<Skeleton variant="circular" width={50} height={50} />
<Skeleton variant="rectangular" width="100%" height="200px" animation="wave" />

Accordion

Simple accordion that supports multiple open items.

Types & Props

• AccordionItem: { question: string; answer: React.ReactNode; icon?: React.ReactNode }
• icon?: React.ReactNode
• items: AccordionItem[]
• className?: string
• containerClassName?: string
• onIconClick?: (idx: number, item: AccordionItem) => void

<Accordion
  items={[
    { question: 'What is this?', answer: 'An accordion item.' },
    { question: 'Can multiple items be open?', answer: 'Yes.' }
  ]}
/>

Rating

Rating display with default star icon or custom icon image.

Props

• rating: number
• total: number
• icon?: string
• showOnlyRated?: boolean (default: false)

<Rating rating={3} total={5} />
<Rating rating={4} total={5} icon="/icons/star.svg" />
<Rating rating={4} total={5} showOnlyRated />

ScrollToTop

Utility component that scrolls to top on mount and browser navigation events.

<ScrollToTop />

Development

# Install dependencies
npm install

# Build package (JS + types + styles)
npm run build

# Watch mode
npm run dev