Components

Sidebar

A persistent panel that sits beside your page content.

Preview

Usage

import { Sidebar } from '@fwenthehunter/friendly-ui';

<div className="flex flex-wrap">
  <Sidebar side="left" size="md" aria-label="Workspace">
    <nav aria-label="Workspace navigation">...</nav>
  </Sidebar>
  <section className="min-w-0 flex-1">Your content</section>
</div>

Use a flex container. The side prop sets flex order and the corresponding border; size selects 12rem, 16rem, or 20rem. At viewport widths of 425px and below, it takes 100% of its parent width. Use a wrapping parent, and a full-width parent when it should span the screen.

Sidebar renders a server-compatible aside in the page layout. It is always present: it has no trigger, overlay, open state, or close button. The side control in this example only changes which side of the content it occupies. Use Drawer for a panel that opens over the page and can be dismissed. Use --fui-sidebar-width for a custom desktop width, and supply an accessible name when the page has multiple complementary regions.

Customize this component

Choose a name.
Add its CSS to your app’s theme.css, imported after the package styles.
Pass the same name to the prop. No registration, provider, or package edits are needed. Built-in TypeScript suggestions remain available.

A custom name alone does not create styles: until its CSS is loaded, it inherits the component’s base appearance. The examples below are application styles, not additional package defaults.

Add a size

Changing the width token preserves the package’s full-width mobile rule at 425px and below.

/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
  .fui-sidebar[data-size="wide"] {
    --fui-sidebar-width: 24rem;
  }
}

import { Sidebar } from "@fwenthehunter/friendly-ui";

<Sidebar size="wide" side="left">Workspace navigation</Sidebar>

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`side`	left \| right	left
`size`	sm \| md \| lg \| custom string	md