rothzerg-ui

v0.1.22

Published

2 days ago

A highly customizable React UI component library built with TypeScript, TailwindCSS 4.2 and BEM methodology

0High
0Medium
0Low

rothzerg

react ui components typescript tailwindcss design-system bem accessible

Rothzerg UI

A highly customizable, production-ready React component library built with TypeScript, TailwindCSS 4.2, and BEM CSS methodology.

Features

70+ production-ready components — Button, Dialog, Select, Toast, DataTable, and more
40+ page blocks — Hero, Dashboard, Kanban, Pricing, AuthForm, and more
25 React hooks — useDebounce, useLocalStorage, useMediaQuery, and more
20 utility functions — formatDate, formatNumber, slugify, deepEqual, and more
Fully customizable — every token is a CSS custom property, configured via rothzerg.config.ts
BEM methodology — semantic class names, easy to override
TailwindCSS 4.2 — compiled at build time, no Tailwind required in your project
Accessible — built on Radix UI primitives, WCAG 2.1 AA
TypeScript first — comprehensive type definitions
Tree-shakeable — per-module output, only bundle what you use
Dark mode — class-based or media query strategy

Quick Start

1. Install

npm install rothzerg-ui
# or
bun add rothzerg-ui

2. Import styles

// app/layout.tsx (Next.js) or main.tsx (Vite)
import 'rothzerg-ui/styles';

3. Add the provider

import { RothzergProvider } from 'rothzerg-ui';
import config from './rothzerg.config';

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <RothzergProvider config={config}>
      {children}
    </RothzergProvider>
  );
}

4. Use components

import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from 'rothzerg-ui';

export function MyCard() {
  return (
    <Card variant="elevated" interactive>
      <CardHeader row>
        <CardTitle>Revenue</CardTitle>
        <Badge variant="success">+12%</Badge>
      </CardHeader>
      <CardContent>
        <p>$48,293 this month</p>
        <Button variant="outline" size="sm">View report</Button>
      </CardContent>
    </Card>
  );
}

Configuration

Copy rothzerg.config.example.ts to your project root and customize:

// rothzerg.config.ts
import { defineConfig } from 'rothzerg-ui';

export default defineConfig({
  theme: {
    colors: {
      primary: '#6366f1',
      primaryForeground: '#fff',
    },
    borderRadius: {
      md: '0.5rem',
    },
    fonts: {
      sans: "'Inter', system-ui, sans-serif",
    },
    animation: {
      duration: '120ms',
    },
  },
  darkMode: 'class', // 'class' | 'media' | false
});

All config values map to CSS custom properties (--rz-color-primary, --rz-radius-md, etc.) that you can also override directly in CSS.

Dark mode

With darkMode: 'class' (default), toggle by adding the dark class to <html>:

document.documentElement.classList.toggle('dark');

Components

| Component | Description | |-----------|-------------| | Accordion | Single/multiple, default/separated variants | | Alert | 5 variants, dismissible | | AlertDialog | Confirmation dialog with cancel/action | | Avatar / AvatarGroup | With fallback initials and status indicator | | AvatarCard | Avatar with name and description | | Badge | 7 variants, 3 sizes | | Banner | Full-width notification strip | | Breadcrumb | With custom separator and ellipsis | | Button | 6 variants, 4 sizes, loading state | | Calendar / CalendarRange | Date and date-range selection | | Card | Header, content, footer, image sub-components | | Carousel | Auto-play, loop, slides-per-view, arrows/dots | | Chart | BarChart, LineChart, PieChart | | Checkbox | Including indeterminate state | | Chip | Dismissible tag with icon support | | CodeBlock | Syntax-highlighted with line numbers and copy | | Collapsible | Animated expand/collapse | | ColorPicker | Hue slider, swatches, hex input | | Combobox | Searchable select with grouped options | | Command | Command palette with keyboard navigation | | ContextMenu | Right-click menu with sub-menus | | CopyButton | Clipboard copy with success feedback | | DataTable | Sortable, with custom cell renderers | | DatePicker / DateRangePicker | Calendar popover with clear button | | Dialog | 5 sizes, backdrop blur | | Drawer | Slide-in panel from any side | | DropdownMenu | Sub-menus, checkboxes, radio groups | | EmptyContent | Empty state with icon, title, description | | FileUpload | Drag-and-drop with file list | | Form | React Hook Form integration with field components | | HoverCard | Rich hover popover | | Input | Label, hint, error, left/right addons | | InputOTP | One-time password input | | Kbd | Keyboard shortcut display | | Label | Required/optional indicators | | Marquee | Horizontal/vertical scrolling ticker | | Menubar | Application-style menu bar | | MultiSelect | Tag-based multi-option select | | NavigationMenu | Mega-menu with animated content | | NumberInput | Increment/decrement with min/max/step | | Pagination | Page controls with size options | | Popover | Positioned floating content | | Progress / ProgressRing | Linear and circular progress indicators | | RadioGroup | Accessible radio button group | | Rating | Star rating input | | Resizable | Drag-to-resize panel layout | | ScrollArea | Custom scrollbar overlay | | Select | Flat and grouped options | | Separator | Horizontal/vertical with optional label | | Sheet | Side drawer variant of Dialog | | Skeleton | Pulse/wave animation, SkeletonText, SkeletonCard | | Slider | Range slider with step and marks | | Spinner | Loading indicator, 5 variants | | StatCard | Metric card with trend indicator | | Stepper | Multi-step progress indicator | | Switch | Toggle with label and description | | Table | Sortable, striped, compact, bordered | | Tabs | Default, underline, pills variants | | TagInput | Free-text tag entry | | Textarea | With character counter | | Timeline | Vertical event timeline | | Toast / Toaster / useToast | Hook-based, 5 variants, swipe to dismiss | | ToggleGroup | Single/multiple selection button group | | Tooltip | 4 sides, custom content | | Tree | Collapsible file-tree with multi-select |

Blocks

Pre-built page sections ready to drop into your app.

| Block | Description | |-------|-------------| | ActivityFeed | Event feed with avatar, title, timestamp | | AppDownload | App store download section | | AuthForm | Login / register with social providers | | BlogPost | Article layout with cover and metadata | | Changelog | Versioned release notes | | Chat | Messaging UI with bubbles and input | | ComingSoon | Launch countdown page | | CommandPalette | Global search overlay | | ContactForm | Contact form with validation | | CookieConsent | GDPR cookie banner | | CTA | Call-to-action section, 4 variants | | Dashboard | Stats + chart + table layout | | DataTablePage | Full-page data table with search and pagination | | EmptyState | Empty page section with illustration slot | | ErrorPage | 404 / 500 error page | | FAQ | Accordion-based FAQ section | | FeaturesGrid | 2/3/4 column icon card grid | | Footer | Multi-column footer with logo and links | | Hero | Centered or split layout with background options | | Invoice | Printable invoice layout | | Kanban | Drag-and-drop kanban board | | LoadingPage | Skeleton loading screen | | Maintenance | Site under maintenance page | | MediaGallery | Masonry/grid image gallery | | Navbar | Sticky, responsive, mobile drawer | | Newsletter | Email signup section | | NotificationCenter | Notification list with read/unread state | | Onboarding | Multi-step onboarding flow | | Pricing | Pricing cards with monthly/yearly toggle | | PricingComparison | Feature comparison table | | ProfilePage | User profile with avatar and stats | | Settings | Settings page with sidebar navigation | | Sidebar / SidebarLayout | Collapsible sidebar with sections | | SplitView | Code editor-style split panel | | Stats | Metrics strip with icons | | TeamGrid | Team member card grid | | Testimonials | Quote cards with avatar | | UserMenu | Avatar dropdown with profile and logout |

Hooks

import { useDebounce, useLocalStorage, useMediaQuery } from 'rothzerg-ui';

| Hook | Description | |------|-------------| | useDebounce | Debounce a value by N ms | | useThrottle | Throttle a rapidly-changing value | | useLocalStorage | Sync state with localStorage | | useSessionStorage | Sync state with sessionStorage | | useMediaQuery | Reactively match a CSS media query | | useBreakpoint | Current Tailwind-style breakpoint name | | useClickOutside | Detect clicks outside a ref element | | useKeyPress | Detect when a specific key is pressed | | useClipboard | Copy text with a "copied" state timeout | | useFetch | Simple data fetching with loading/error state | | usePrevious | Track the previous value of a variable | | useToggle | Boolean toggle with optional initial value | | useCounter | Increment/decrement/reset a numeric counter | | useArray | Array state with push/pop/filter helpers | | useSet | Set state with add/delete/has/clear helpers | | useMap | Map state with set/delete/clear helpers | | useIsMounted | Returns true once the component has mounted | | useIsVisible | IntersectionObserver-based visibility detection | | useScrollPosition | Track window or element scroll position | | useWindowSize | Reactive window width and height | | useInterval | Run a callback on a repeating interval | | useTimeout | Run a callback after a delay, auto-cleared | | useHover | Detect if a ref element is being hovered | | useFocus | Detect if a ref element has focus | | useEventListener | Attach/detach a DOM event listener safely |

Utilities

import { formatDate, formatNumber, slugify, cn } from 'rothzerg-ui';

| Utility | Description | |---------|-------------| | cn | Merge Tailwind class names with clsx + tailwind-merge | | formatDate | Format a Date to a locale string with flexible options | | formatNumber | Format numbers: decimals, compact (1.2k), currency, percent | | formatBytes | Convert bytes to human-readable string (KB, MB, GB…) | | formatDuration | Convert seconds to mm:ss or hh:mm:ss | | formatRelativeTime | Time ago string ("2 hours ago", "just now") | | truncate | Truncate a string to N chars with a custom ellipsis | | slugify | Convert a string to a URL-safe slug | | capitalize | Capitalize first letter of each word | | getInitials | Extract initials from a name string | | randomId | Generate a short random alphanumeric ID | | clamp | Clamp a number between min and max | | range | Generate an array of numbers in a range | | sleep | Promise-based delay helper | | groupBy | Group an array of objects by a key | | uniqueBy | Deduplicate an array by a key or identity | | debounce | Debounce a function call by N ms | | throttle | Throttle a function to at most once per N ms | | pick | Pick specific keys from an object | | omit | Omit specific keys from an object | | deepEqual | Deep equality check between two values | | copyToClipboard | Write text to the clipboard | | downloadFile | Trigger a file download in the browser | | isEmail | Validate an email address | | isUrl | Validate a URL string |

CSS Customization

All styles use the rz- prefix with BEM methodology:

/* Override any component style */
.rz-button--default {
  background-color: #6366f1;
}

.rz-card {
  border-radius: 1rem;
}

/* Override tokens globally */
:root {
  --rz-color-primary: #6366f1;
  --rz-radius-md: 0.5rem;
  --rz-animation-duration: 120ms;
}