@philiprehberger/react-ui-primitives

Lightweight React UI primitives with Tailwind CSS styling

Installation

npm install @philiprehberger/react-ui-primitives clsx

Usage

Button

Multi-variant button with loading state

import { Button } from '@philiprehberger/react-ui-primitives';

<Button variant="primary" onClick={handleClick}>Save</Button>
<Button variant="danger" loading>Deleting...</Button>

Variants: primary, success, danger, secondary

Alert

Alert banner with type-based styling and optional action button.

import { Alert } from '@philiprehberger/react-ui-primitives';

<Alert type="success" message="Changes saved successfully" />
<Alert type="error" message="Something went wrong" onAction={retry} actionText="Retry" />

Types: error, success, warning, info

Spinner

Inline loading spinner with three sizes and an aria-live="polite" label.

import { Spinner } from '@philiprehberger/react-ui-primitives';

<Spinner size="sm" label="Saving" />
<Spinner size="md" />
<Spinner size="lg" />

Badge

Color-variant pill badge sharing the Button palette.

import { Badge } from '@philiprehberger/react-ui-primitives';

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Error</Badge>

API

Export	Type	Description
Button	Component	Multi-variant button with loading state and hover text
Alert	Component	Alert banner with type-based styling and optional action button
Spinner	Component	Loading spinner (sizes: sm, md, lg) with sr-only label
Badge	Component	Pill badge with color variants
ButtonProps	Type	Props: variant?, loading?, hoverText?, plus native button attrs
ButtonVariant	Type	'primary' | 'success' | 'danger' | 'secondary'
AlertProps	Type	Props: type, message, onAction?, actionText?, className?
AlertType	Type	'error' | 'success' | 'warning' | 'info'
SpinnerProps	Type	Props: size?, label?, plus native div attrs
SpinnerSize	Type	'sm' | 'md' | 'lg'
BadgeProps	Type	Props: variant?, plus native span attrs
BadgeVariant	Type	'primary' | 'success' | 'danger' | 'warning' | 'secondary'

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