Aedis UI

App Shell

Sidebar and main region. Below md, the sidebar hides behind a menu toggle in a top bar.

Approvals

Page content.

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 app-shell# pnpm dlx @aedis/cli@0.1.0 add app-shell · yarn dlx @aedis/cli@0.1.0 add app-shell · bunx @aedis/cli@0.1.0 add app-shell

Props

PropTypeDefaultDescription
sidebarReactNode—The navigation, usually a Sidebar.
titleReactNode—Shown in the top bar on small screens.
menuLabelstring—Accessible name of the menu toggle. Defaults to the Locale provider.

Security

  • The toggle exposes aria-expanded and aria-controls; the sidebar stays a navigation landmark.