@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

Utilities

Export	Description
cn(...inputs)	Merge class names (clsx + tailwind-merge)

Development

npm install
npm run build
npm test

Support

If you find this project useful:

⭐ Star the repo

🐛 Report issues

💡 Suggest features

❤️ Sponsor development

🌐 All Open Source Projects

💻 GitHub Profile

🔗 LinkedIn Profile

License

MIT