Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Utility components for formatting, displaying, and managing data presentation. Most are renderless or minimal — they format values and return text.
Skill Claude CodeCodex
Formats byte values into human-readable sizes (B, KiB, MiB, GiB, etc.) using binary scale (1024). Also exports formatSize utility function.
Skill Claude CodeCodex
Formats dates using date-fns patterns. Supports relative time ("3 hours ago"), toggling between relative and absolute display, and auto-refreshing relative times.
Skill Claude CodeCodex
Formats millisecond values into human-readable durations (ms, s, min, hr, day, month). Auto-pluralizes units. Also exports formatDuration utility function.
Skill Claude CodeCodex
Truncates text with expandable "..." toggle. Supports character limit and line-based truncation with responsive re-measurement.
Skill Claude CodeCodex
Progressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports useInfinityList hook for custom implementations.
Skill Claude CodeCodex
Pagination controls with page numbers, navigation arrows, and items range display. Supports three display modes: pages, items, or both.
Skill Claude CodeCodex
Pluralizes text based on count. Wraps the pluralize library. Also exports a pluralize utility function.
Skill Claude CodeCodex
Masks sensitive content with a configurable character, keeping first and last characters visible. Click to toggle visibility.
Skill Claude CodeCodex
Sortable column header utility with animated direction indicators. Cycles through asc → desc → null (unsorted). Built on Framer Motion.
Skill Claude CodeCodex
Basic UI building blocks for constructing interfaces. These are the foundational interactive and display components.
Skill Claude CodeCodex
Displays a user avatar with image, auto-generated initials, or icon fallback. Supports color generation, variants, and click interaction.
Skill Claude CodeCodex
Small status indicator or count label positioned relative to its child element. Animated on appearance using Framer Motion.
Skill Claude CodeCodex
A versatile action trigger component built on Framer Motion with support for variants, colors, sizes, icons, and full theme customization.
Skill Claude CodeCodex
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).
Skill Claude CodeCodex
Searchable command menu with keyboard navigation, sections, hotkey support, and animated items. Typically used inside a Dialog for modal access.
Skill Claude CodeCodex
A button optimized for icon-only actions. Wraps the Button component with square padding and removes fullWidth, start, and end props.
Skill Claude CodeCodex
Displays keyboard shortcuts with platform-aware modifier key symbols. Splits key combinations by + and renders each key as a styled Chip inside a element.
Skill Claude CodeCodex
Animated loading indicator with three pulsing dots. Each dot animates opacity and scale with staggered timing using Framer Motion.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Placeholder loading skeleton for content areas. Supports predefined shape variants and an optional shimmer animation.
Skill Claude CodeCodex
Input and control components for building forms and capturing user data. Includes text inputs, selects, date pickers, checkboxes, radios, toggles, and range sliders.
Skill Claude CodeCodex
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.