@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'`