AppShell
the default frame of a back office or member area: a side navigation, the person at its foot, the page on the right
role: shell pages: app, account motion: none
Install
npx shadcn-vue@latest add @trame/shell-app-shell # Vue
npx shadcn@latest add @trame/shell-app-shell # Reactsidebar
@trame/shell-app-shell--sidebar the default frame of a back office or member area: a side navigation, the person at its foot, the page on the right
grouped-sidebar
@trame/shell-app-shell--grouped-sidebar many resources: labelled groups that fold, counts beside the pages, the person pinned at the foot
floating-inset
@trame/shell-app-shell--floating-inset calm member areas: the sidebar and the page as rounded cards floating on a tinted background
steps
@trame/shell-app-shell--steps onboarding: a narrow column of steps with progress, the step’s page on the right
top-menus
@trame/shell-app-shell--top-menus a wide working page that needs the full width: no sidebar, the groups of pages as menus in the top bar and the current group’s pages as tabs under it