Claude Skills by reaviz

Use when building UI in React with the reablocks component library (Button, Dialog, Drawer, Select, Calendar, CommandPalette, Tabs, Tree, Tooltip, etc.). Covers ThemeProvider setup, extendTheme, custom variants, mergeThemeClasses, useComponentTheme/useTheme hooks, and the 50+ component index.

Utility components for formatting, displaying, and managing data presentation. Most are renderless or minimal — they format values and return text.

Formats byte values into human-readable sizes (B, KiB, MiB, GiB, etc.) using binary scale (1024). Also exports `formatSize` utility function.

Formats dates using date-fns patterns. Supports relative time ("3 hours ago"), toggling between relative and absolute display, and auto-refreshing relative times.

Formats millisecond values into human-readable durations (ms, s, min, hr, day, month). Auto-pluralizes units. Also exports `formatDuration` utility function.

Truncates text with expandable "..." toggle. Supports character limit and line-based truncation with responsive re-measurement.

Progressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports `useInfinityList` hook for custom implementations.

Pagination controls with page numbers, navigation arrows, and items range display. Supports three display modes: pages, items, or both.

Pluralizes text based on count. Wraps the `pluralize` library. Also exports a `pluralize` utility function.

Masks sensitive content with a configurable character, keeping first and last characters visible. Click to toggle visibility.

Sortable column header utility with animated direction indicators. Cycles through `asc` → `desc` → `null` (unsorted). Built on Framer Motion.

Basic UI building blocks for constructing interfaces. These are the foundational interactive and display components.

Displays a user avatar with image, auto-generated initials, or icon fallback. Supports color generation, variants, and click interaction.

Small status indicator or count label positioned relative to its child element. Animated on appearance using Framer Motion.

A versatile action trigger component built on Framer Motion with support for variants, colors, sizes, icons, and full theme customization.

Compact element for tags, filters, labels, or selections. Supports colors, variants, sizes, adornments, and interactive states (clickable, selectable). Uses `forwardRef` and keyboard accessibility (Enter/Space).

Searchable command menu with keyboard navigation, sections, hotkey support, and animated items. Typically used inside a Dialog for modal access.

A button optimized for icon-only actions. Wraps the Button component with square padding and removes `fullWidth`, `start`, and `end` props.

Displays keyboard shortcuts with platform-aware modifier key symbols. Splits key combinations by `+` and renders each key as a styled Chip inside a `<kbd>` element.

Animated loading indicator with three pulsing dots. Each dot animates opacity and scale with staggered timing using Framer Motion.

Navigation system with two components: **NavigationBar** (container) and **NavigationButton** (items). Supports vertical/horizontal layout, animated active indicators, and `start`/`end` slot props for non-button content.

Placeholder loading skeleton for content areas. Supports predefined shape variants and an optional shimmer animation.

Input and control components for building forms and capturing user data. Includes text inputs, selects, date pickers, checkboxes, radios, toggles, and range sliders.

Date picker calendar with day/month/year views, range selection, time picker, presets, min/max constraints, and animated transitions. Built on date-fns and Framer Motion.

Animated checkbox with SVG check/intermediate marks, label support, and keyboard accessibility. Built on Framer Motion with customizable SVG paths.

Text input with calendar popup for date selection. Supports single dates and date ranges with optional preset quick filters. Built on Input, Calendar, and Menu components.

Text input with start/end adornments, error state, sizes, and imperative ref API. Also includes DebouncedInput and InlineInput variants.

Radio button with animated indicator and label. Use standalone or inside RadioGroup for managed selection.

Slider components for single value or dual-handle range selection. Draggable handles with tooltip display using Framer Motion.

Feature-rich dropdown select with search filtering, keyboard navigation, multi-select, creatable options, and paste support. Uses Fuse.js for fuzzy search. Renders via ConnectedOverlay (Floating UI).

Auto-resizing multi-line text input built on `react-textarea-autosize`. Supports sizes, error state, and imperative ref API.

On/off switch component with animated handle using Framer Motion spring animation. Supports sizes and custom animation configuration.

Overlay, modal, and popup components that render above the main content. Built on Floating UI for positioning and Framer Motion for animations. Most use focus trapping and backdrop support.

Animated overlay backdrop for modals, dialogs, and drawers. Fades in/out with Framer Motion. Typically used internally by Dialog and Drawer.

Inline alert/notification banner with icon and variant colors. Also exports pre-configured variants: SuccessCallout, ErrorCallout, WarningCallout, InfoCallout.

Confirmation dialog with accept/reject actions. Built on Dialog. Also exports `useConfirmDialog` hook for imperative usage.

Right-click context menu using ConnectedOverlay (Floating UI). Supports focus trapping, global menu state (only one open at a time), and auto-close on click.

Modal dialog with backdrop, focus trapping, animated entrance/exit, and slot-based content. Built on GlobalOverlay and Framer Motion. Also exports `useDialog` hook.

Slide-in side panel with backdrop, focus trapping, position variants, and slot-based content. Built on GlobalOverlay and Framer Motion. Also exports `useDrawer` hook.

Dropdown menu positioned via ConnectedOverlay (Floating UI). Supports focus trapping, auto-width matching, and animated entrance/exit.

Toast notification system with variants, auto-dismiss, flood prevention, and custom components. Wrap your app in `<Notifications>` and use `useNotification` hook to trigger.

Content popover anchored to an element. Built on Tooltip with focus trapping and click trigger. Supports all Tooltip positioning options.

Hover tooltip with Floating UI positioning, animated entrance/exit, enter/leave delays, and follow-cursor mode. Global state ensures only one tooltip is visible at a time.

Structural and container components for organizing page content and navigation flow. Includes content containers, collapsible sections, dividers, form fields, lists, tabs, trees, and animation wrappers.

Navigation breadcrumb trail built with composable sub-components: Breadcrumbs, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, and BreadcrumbPage.

Content container with optional header section. Renders as a `<section>` with border, background, rounded corners, and padding.

Expandable/collapsible content panel with animated height transition. Uses Framer Motion AnimatePresence for smooth open/close.

Visual separator line. Renders as `<hr>`. Supports horizontal/vertical orientation and variant colors.

Form field wrapper with label, hint text, error state, required indicator, and horizontal/vertical layout. Use to wrap any form input.

Structured list display with items, headers, adornments, and interactive states. Composed of List, ListItem, and ListHeader.