@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