reaviz

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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.

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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).

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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.

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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.

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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.

reaviz/skills

Skill Claude CodeCodex

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.

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

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

reaviz/skills

Skill Claude CodeCodex

Visual separator line. Renders as . Supports horizontal/vertical orientation and variant colors.