Component Library

This section documents all UI components used in HRMS. Each component follows the HRMSElegance design system.

Component Categories

Category	Components	Purpose
Buttons	Button, IconButton	Actions and interactions
Cards	StatsCard, ContentCard	Content containers
Forms	Input, Select, Checkbox, etc.	Data entry
Data Display	Table, Badge, Avatar	Presenting data
Feedback	Toast, Skeleton, Alert	User feedback

Priority Tiers

Tier 1: Essential for Phase 02 (Employee Entity)

Must be implemented first:

Component	Purpose	Complexity
Button	All actions	Low
Input	Text fields	Low
Label	Form labels	Low
Card	Content containers	Low
Table	Employee list	Medium
Form	Form context	Medium
Select	Dropdowns	Medium
Dialog	Modals	Medium
Avatar	Profile images	Low
Badge	Status indicators	Low

Tier 2: Layout Components

Required for app shell:

Component	Purpose	Complexity
Sidebar	Desktop navigation	High
TopBar	Header, mobile menu	Medium
Layout	App shell wrapper	Medium
Sheet	Mobile drawer	Medium
Scroll Area	Scrollable containers	Low
Separator	Visual dividers	Low

Tier 3: Feedback & Enhancement

Nice to have early:

Component	Purpose	Complexity
Tooltip	Hover hints	Low
Dropdown Menu	Context menus	Medium
Toast (Sonner)	Notifications	Low
Skeleton	Loading states	Low

Component Structure

All components follow this structure:

import * as React from "react";
import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";

const componentVariants = cva(
  "base-classes-here",
  {
    variants: {
      variant: {
        default: "default-classes",
        secondary: "secondary-classes",
      },
      size: {
        default: "size-classes",
        sm: "small-classes",
        lg: "large-classes",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface ComponentProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof componentVariants> {}

const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(componentVariants({ variant, size, className }))}
        {...props}
      />
    );
  }
);
Component.displayName = "Component";

export { Component, componentVariants };

Quick Reference: Common Patterns

Stats Card

<div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-lg transition-all hover:shadow-xl hover:-translate-y-1 duration-300">
  <div className="flex items-center justify-between">
    <div>
      <p className="text-white/80 text-sm font-medium">Label</p>
      <p className="text-4xl font-semibold tracking-tight">Value</p>
    </div>
    <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
      <Icon className="w-6 h-6 text-white" />
    </div>
  </div>
</div>

Content Card

<div className="bg-card text-card-foreground rounded-2xl shadow-lg shadow-gray-200/50 dark:shadow-black/40 p-6 border-none">
  <h3 className="text-lg font-semibold">{title}</h3>
  {children}
</div>

Primary Button

<Button className="bg-primary text-white rounded-full shadow-lg shadow-primary/25 hover:shadow-primary/35 hover:scale-[1.02] active:scale-95 transition-all">
  Action
</Button>

See individual component pages for detailed documentation.

Components

On this page