All components (204)

App shell

Structure · AppShell · .amset-shell

What it is and when to use it

The shell of an application: header, side column, content and footer, in a CSS grid and in a single component: header, sider, children and footer.

When to use it

The frame of a management screen: TopBar on top, SideNav on the left and the content in the middle.

When not to

A public page or a landing page: there is no application column or header there.

What it gives without being asked: the content is a <main> with an id (mainId, content by default) and tabindex="-1" —the target of the TopBar "skip to content" link (skipTo)—, the header stays fixed (stickyHeader={false} to turn that off), and the side column stays fixed right below it (it measures its height) with its own scrolling if the menu is taller than the window.

Narrow screen (under 48 rem): the column moves above the content and stops being fixed, unless it is a SideNav: that one stays in its tile rail below 40 rem and remains next to the content, fixed and all the way down. A menu that hides behind a button needs its own panel (Drawer) and that is mounted outside.

Keyboard: Tab goes through the header, the column and the content, in that order. With a TopBar that has skipTo, the first Tab offers "Skip to content".

Fine-tuning: --amset-shell-sider-width (16 rem; also with the siderWidth prop) and --amset-shell-gap (content padding).

What it looks like

Two rings and a pendant.

<AppShell
  header={<TopBar brand="Aurelia Jewelry" skipTo="contenido" actions={<Avatar name="Lucia Ferrer" size="sm" />} />}
  sider={
    <SideNav
      label="Main menu"
      sections={secciones}
      active={activo}
      onNavigate={(clave) => setActivo(clave)}
      collapsed={plegado}
      onCollapsedChange={setPlegado}
    />
  }
  siderWidth="auto"
  mainId="contenido"
>
  <Pedidos />
</AppShell>

Props

Import it with import { AppShell } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	The content of the screen.
`className`	`string`	Merged with the library classes; it does not replace them.
`footer`	`ReactNode`	The footer of the page, under the content.
`header`	`ReactNode`	The top bar: normally a `TopBar`. It stays fixed when scrolling.
`mainId`	`string`	The `id` of the main content. The "skip to content" link of the `TopBar` (`skipTo`) points to it. By default, `content`.
`sider`	`ReactNode`	The left column: normally a `SideNav`. It stays fixed under the header.
`siderWidth`	`string`	Width of the left column. By default, that of `--amset-shell-sider-width` (16 rem).
`stickyHeader`	`boolean`	The header stays stuck to the top when scrolling. Yes by default.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-shell-sider-width`	`16rem`
`--amset-shell-gap`	`var(--amset-space-6)`

How to change it

.amset-shell {
  --amset-shell-sider-width: ...;
  --amset-shell-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

App shell

What it is and when to use it

When to use it

When not to

What it looks like

orders

Order 1040

Order 1041

Order 1042

Order 1043

Order 1044

Order 1045

Props

CSS variables

How to change it

In the test bench