Layout

Layout

reaviz af52888 1.1 KB Updated

File contents

Layout

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.

Components

Component Description
Breadcrumbs Navigation breadcrumb trail with composable sub-components
Card Content container with optional header, padding, border
Collapse Animated expand/collapse panel (height + opacity transition)
Divider Horizontal/vertical separator line with variant colors
Field Form field wrapper with label, hint, error, required indicator
List Structured list with ListItem (adornments, active, clickable) and ListHeader
MotionGroup / MotionItem Staggered animation wrappers using Framer Motion
Stepper Multi-step progress indicator (dots or numbered, with labels)
Tabs Tabbed navigation with TabList, Tab, TabPanel and animated indicator
Tree Hierarchical tree view with expandable TreeNode and custom icons

reaviz/skills/tree/main/reablocks/layout commit af52888222

Frequently asked questions

npx skillmds@latest add reaviz/layout-2