PatternAvailable

AppShell

Application structure combining navigation, header, actions, and the main working surface.

Lesson workspace

Personal information

Browse sections

Activity 03

Introduce yourself

Complete the sentence with your information.

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/app-shell.json

Usage

Import the component into your project and keep the source code under your control.

tsx

import { AppShell } from "@/components/layout/app-shell"

export function Dashboard() {
  return (
    <AppShell
      brand={<strong>Study Lab</strong>}
      title="Dashboard"
      navigation={navigation}
    >
      Your content
    </AppShell>
  )
}

Variants

Visual options included in the component’s official API.

Lesson workspace

Personal information

Browse sections

Activity 03

Introduce yourself

Complete the sentence with your information.

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
brand	ReactNode	—	Product visual identity.
title	string	—	Title of the current surface.
navigation	AppShellNavItem[]	[]	Sidebar navigation items.
labels	AppShellProps["labels"]	English labels	Translate the desktop navigation heading, navigation names and mobile disclosure.
actions	ReactNode	—	Header actions.
sidebarFooter	ReactNode	—	Persistent footer content.

Accessibility

Rules that should remain intact when adapting the component to a product.

Navigation links remain reachable below the desktop breakpoint through a native disclosure.

Navigation uses links and a semantic active state.

Header actions require accessible names; the consumer supplies the main landmark.