@self-created/ui-components

Shared UI components library for the self-created project.

Installation

This is a private npm package. To use it in your project:

npm install @self-created/ui-components

Or if using it locally in a monorepo:

npm install ./packages/ui-components

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from '@self-created/ui-components';

<Button variant="primary" size="md" onClick={handleClick}>
  Click me
</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
• size: 'sm' | 'md' | 'lg'
• fullWidth: boolean
• isLoading: boolean
• leftIcon: ReactNode
• rightIcon: ReactNode

Input

A form input component with label, error, and helper text support.

import { Input } from '@self-created/ui-components';

<Input
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  error={errors.email}
  helperText="Enter your email address"
/>

Form

A form wrapper component that handles form submission.

import { Form } from '@self-created/ui-components';

<Form onSubmit={handleSubmit}>
  {/* form fields */}
</Form>

Table

A flexible table component with sorting, loading, and empty states.

import { Table, type TableColumn } from '@self-created/ui-components';

const columns: TableColumn<User>[] = [
  { key: 'name', header: 'Name', align: 'left' },
  { key: 'email', header: 'Email', align: 'left' },
];

<Table
  columns={columns}
  data={users}
  loading={isLoading}
  striped
  hoverable
/>

Breadcrumb

A breadcrumb navigation component. Supports both regular links and React Router links.

import { Breadcrumb } from '@self-created/ui-components';
import { Link } from 'react-router-dom';

<Breadcrumb
  items={[
    { label: 'Home', to: '/' },
    { label: 'Users', to: '/users' },
    { label: 'Current Page' },
  ]}
  LinkComponent={Link}
/>

Styling

This package uses Tailwind CSS classes. Make sure your project has Tailwind CSS configured with the following custom colors:

// tailwind.config.js
colors: {
  'dga-primary': {
    DEFAULT: '#006B3C',
    dark: '#00502D',
    light: '#008A4F',
    hover: '#005A33',
  },
  'dga-secondary': {
    DEFAULT: '#1E3A5F',
    dark: '#152A47',
    light: '#2A4F7A',
  },
  'dga-success': '#10B981',
  'dga-error': '#EF4444',
  'dga-warning': '#F59E0B',
  'dga-info': '#3B82F6',
}

Development

# Build the package
npm run build

# Watch mode for development
npm run dev

Peer Dependencies

• react: ^18.0.0 || ^19.0.0
• react-dom: ^18.0.0 || ^19.0.0
• react-router-dom: optional (only needed if using Breadcrumb with to prop)