Aedis UI

Sidebar

Grouped navigation with counters for items waiting on a person, and areas that open later.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add sidebar# pnpm dlx @aedis/cli@0.1.0 add sidebar · yarn dlx @aedis/cli@0.1.0 add sidebar · bunx @aedis/cli@0.1.0 add sidebar

Props

PropTypeDefaultDescription
groups{ label; items: SidebarItem[] }[]—Groups of items: href, label, count, countLabel, active, icon, disabled, disabledReason.
header / footerReactNode—Organization switcher at the top, signed-in user at the bottom.
linkComponentComponentType<a>Your router link, e.g. Next.js Link.
labelstring"Main navigation"Accessible name of the nav landmark.

Security

  • Disabled items stay visible with their reason instead of disappearing, so people know an area exists.
  • Counters have accessible text (countLabel), not just a number.