Layoutreadycomponentready

Sidebar

Sidebar is included in the RadCN public package surface with authored docs metadata, package import guidance, and a live preview.

Importimport { Sidebar, SidebarProvider, SidebarContent } from 'radcn/sidebar'

Preview

Live package example

Sidebar renders from the RadCN package in the docs app, with a compact example suitable for visual inspection.

Authored preview

Sidebar renders from the RadCN package in the docs app, with a compact example suitable for visual inspection.

Preview

import { Sidebar, SidebarProvider, SidebarContent } from 'radcn/sidebar'

export function SidebarPreview() {
  return (
    <SidebarProvider defaultOpen>
      <Sidebar>
        <SidebarHeader><SidebarTrigger>Toggle</SidebarTrigger></SidebarHeader>
        <SidebarContent><SidebarMenu><SidebarMenuItem><SidebarMenuButton>Button</SidebarMenuButton></SidebarMenuItem></SidebarMenu></SidebarContent>
      </Sidebar>
    </SidebarProvider>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Sidebar, SidebarProvider, SidebarContent } from 'radcn/sidebar'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Sidebar renders semantic host elements from the RadCN package so baseline accessibility is present in server HTML.
Interactive behavior is attached through explicit Remix 3 browser enhancement where the component requires runtime state.

Customization

Use RadCN CSS variables for color, radius, spacing, and focus treatment.
Target public sidebar data hooks and part classes from the package instead of depending on docs-only wrappers.

Remix 3 Notes

RadCN documents this surface as Remix UI package code rather than a copied React component.
The docs example imports from the package subpath users are intended to import from once installation is available.