Benflux UI

Layout

A composable page shell with Layout, Header, Sider, Content, and Footer. Supports collapsible sidebars with responsive breakpoints.

Dashboard

Main content area

Collapsible Sider

Click the arrow to collapse the sidebar.

npx benflux-ui add app-layout

import { Layout, Header, Sider, Content, Footer } from "@benflux-ui/react"

Prop	Type	Default	Description
hasSider	boolean	false	Set to true when the layout contains a Sider. Switches flex direction to row.
children*	ReactNode	—	Layout children: Header, Sider, Content, Footer

Prop	Type	Default	Description
width	number \| string	200	Width of the sidebar when expanded
collapsedWidth	number \| string	64	Width when collapsed
collapsible	boolean	false	Show the collapse/expand trigger button
collapsed	boolean	—	Controlled collapsed state
defaultCollapsed	boolean	false	Initial collapsed state (uncontrolled)
onCollapse	(collapsed: boolean) => void	—	Called when the sidebar is toggled
breakpoint	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	—	Auto-collapse below this viewport width
theme	"light" \| "dark"	"light"	Color theme of the sidebar
trigger	ReactNode \| null	—	Custom collapse trigger. Pass null to hide it.

Prop	Type	Default	Description
height	number \| string	Header: 64	Fixed height of the element