@rallycry/venetian-blinds

React and Material UI primitives for building stacked Venetian-blinds navigation. Each panel remains visible as a compact header while the active panel expands, and selecting a header scrolls its live target into view.

Install

bun add @rallycry/venetian-blinds @mui/material react

The package requires React 19 or newer and Material UI 9.

Usage

import {
  BlindsSlatHeader,
  ContentBlinds,
  type ContentBlindsSection,
} from "@rallycry/venetian-blinds"

export function SettingsNavigation() {
  const sections: ContentBlindsSection[] = [
    {
      id: "profile",
      renderHeader: ({ active, onJump }) => (
        <BlindsSlatHeader title="Profile" active={active} onClick={onJump} />
      ),
      content: <div>Profile settings</div>,
    },
    {
      id: "notifications",
      renderHeader: ({ active, onJump }) => (
        <BlindsSlatHeader title="Notifications" active={active} onClick={onJump} />
      ),
      content: <div>Notification settings</div>,
    },
  ]

  return <ContentBlinds sections={sections} initialSectionId="profile" />
}

See the exported TypeScript types for the complete component and callback contracts.

Release

Update the package version, then push a matching venetian-blinds-vX.Y.Z tag. The release workflow validates, builds, and publishes the package to public npm.