@philiprehberger/react-ui-kit

Accessible React UI component library with Tailwind CSS

Installation

npm install @philiprehberger/react-ui-kit clsx tailwind-merge

Usage

import { Button, Card, Input, Modal } from '@philiprehberger/react-ui-kit';

<Card variant="bordered" padding="lg">
  <Input label="Email" type="email" required />
  <Button variant="primary" size="md">Submit</Button>
</Card>

Display

import { Button, Badge, Skeleton, Spinner } from '@philiprehberger/react-ui-kit';

<Button isLoading>Save</Button>
<Badge variant="success">Active</Badge>
<Skeleton width="60%" height={24} />
<Spinner size="md" label="Loading users" />

Form

import { FormInput, FormSelect, FormTextarea } from '@philiprehberger/react-ui-kit';

<FormInput name="email" label="Email" type="email" required />
<FormSelect name="role" label="Role" options={[{ value: 'admin', label: 'Admin' }]} />
<FormTextarea name="bio" label="Bio" maxLength={280} />

Overlay

import { Modal, ConfirmDialog, ToastProvider, useToast } from '@philiprehberger/react-ui-kit';

<Modal isOpen={open} onClose={close} title="Settings">
  ...
</Modal>

Navigation & Data

import { Tabs, Pagination, DataList } from '@philiprehberger/react-ui-kit';

<Tabs>
  <Tabs.List>
    <Tabs.Tab id="general">General</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel id="general">...</Tabs.Panel>
</Tabs>

API

Components

Component	Description
`Button`	Multi-variant button with loading states
`Card`, `CardHeader`, `CardBody`, `CardFooter`, `CompoundCard`	Container with header/body/footer slots
`Badge`, `DiscountBadge`, `NewBadge`, `FeaturedBadge`	Status indicator badges
`Input`	Text input, select, and textarea with validation states
`Checkbox`	Accessible checkbox with label
`RadioGroup`	Grouped radio buttons
`Modal`	Dialog with focus trap and keyboard navigation
`Dropdown`	Dropdown menu with keyboard support
`Tabs`	Compound component tabs (Tabs.List, Tabs.Tab, Tabs.Panel)
`Tooltip`	Hover tooltip with positioning
`ConfirmDialog`	Confirmation dialog with variants
`Pagination`	Page navigation with ellipsis
`Skeleton`, `TextSkeleton`, `AvatarSkeleton`, `CardSkeleton`	Loading placeholders
`Spinner`	Accessible loading spinner with size variants
`DataList`, `GridList`, `StackList`, `DataListSkeleton`, `DataListEmpty`	Generic data list with layouts

Form Components

Component	Description
`FormField`, `TextField`, `EmailField`, `PasswordField`, `SearchField`, `NumberField`	Field wrappers with validation
`FormGroup`, `FormRow`	Form layout helpers
`FormInput`	Input with form validation integration
`FormSelect`	Select with form validation integration
`FormTextarea`	Textarea with character count

Providers & Hooks

Export	Type	Description
`ToastProvider`	Component	Toast notification context provider
`useToast()`	Hook	Show toast notifications
`LiveRegionProvider`	Component	Screen reader announcement provider
`useAnnounce()`	Hook	Trigger screen reader announcements