App Shell
Reusable business application layout frame with sidebar, topbar, page header, main content slot, and footer.
Overview
The App Shell component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.
Why this exists
This component provides a reusable, accessible primitive for app-shell use cases within the Byteion design system.
Mental model
Think of this component as a building block. Compose it with other Byteion primitives to build complex interfaces.
When to use
When not to use
Basic example
The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.
Desktop layout with interactive topbar
Page Title
Short description or meta information about this page.
Page Content Area
This is the main content slot.
Add your page content here.
Mobile and collapsed-ready structure
Mobile Layout
App-shell automatically shifts to an offcanvas drawer on smaller viewports.
Mobile Content Area
Test the mobile drawer trigger in the header above.
import {
AppShell,
AppShellSidebar,
AppShellBrand,
AppShellNav,
AppShellHeader,
AppShellHeaderActions,
AppShellMain,
AppShellContentSlot,
Button,
Input,
} from '@byteion/react';
export default function AppShellDemo() {
return (
<AppShell
className="min-h-[32rem]"
sidebar={
<AppShellSidebar>
<AppShellBrand>Byteion</AppShellBrand>
<AppShellNav>
<a className="block rounded-md bg-muted px-3 py-2 text-sm font-medium text-foreground" href="#">Dashboard</a>
<a className="block rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-muted" href="#">Reports</a>
</AppShellNav>
</AppShellSidebar>
}
header={
<AppShellHeader>
<Input placeholder="Search..." className="max-w-xs" />
<AppShellHeaderActions>
<Button size="sm">New</Button>
</AppShellHeaderActions>
</AppShellHeader>
}
>
<AppShellMain>
<AppShellContentSlot>
<div>
<h2 className="text-lg font-semibold text-foreground">Dashboard</h2>
<p className="mt-2 text-sm text-muted-foreground">Primary app content renders here.</p>
</div>
</AppShellContentSlot>
</AppShellMain>
</AppShell>
);
}<script setup lang="ts">
import { AppShell, Button, Input } from '@byteion/vue';
</script>
<template>
<AppShell class="min-h-[32rem]">
<template #brand>
<span class="font-semibold text-foreground">Byteion</span>
</template>
<template #nav>
<a class="block rounded-md bg-muted px-3 py-2 text-sm font-medium text-foreground" href="#">Dashboard</a>
<a class="block rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-muted" href="#">Reports</a>
</template>
<template #search>
<Input placeholder="Search..." />
</template>
<template #header-actions>
<Button size="sm">New</Button>
</template>
<template #default>
<section class="flex min-h-[22rem] items-center justify-center rounded-xl border border-dashed border-border bg-card/60 p-8 text-center">
<div>
<h2 class="text-lg font-semibold text-foreground">Dashboard</h2>
<p class="mt-2 text-sm text-muted-foreground">Primary app content renders here.</p>
</div>
</section>
</template>
</AppShell>
</template>Variants
Each variant communicates a different meaning. Choose based on priority, not aesthetics.
Single default variant.
Sizes
Size should match the importance and context of the component.
- md — md size.
States
This component reacts seamlessly to the following interaction and data states:
- default — Resting appearance before interaction.
- active — Currently selected or in use.
Anatomy
Usage guidelines
- Follow the design system tokens.
- Maintain consistent spacing.
Do and Don't
Do
- Follow accessibility guidelines.
- Maintain visual hierarchy.
Don't
- Do not hardcode colors.
- Do not nest interactive elements.
Accessibility
This component follows standard ARIA patterns for its role. Keyboard interaction matches the native HTML element behavior.
Role:landmark structure
ARIA Attributes
aria-labelaria-currentaria-hidden
Keyboard Navigation
- Tab
- Shift+Tab
Customization
Override visual appearance by modifying variables.css or Tailwind utility classes.
Compose with React cva()
Use the exportedcva() +cn() utilities to compose your own variant on top of the Byteion tokens.
import { cva, cn, type VariantProps } from '@byteion/react';
const myAppShell = cva('base classes…', {
variants: {
accent: { soft:'border-primary-200', loud:'border-primary-500' },
},
defaultVariants: { accent:'soft' },
});
type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myAppShell>;Compose with Vue cva()
Use the exportedcva() +cn() utilities inside standard Vue setup blocks.
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';
interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();
const myAppShell = cva('base classes…', {
variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});
const cls = computed(() => myAppShell({ accent: props.accent, class: attrs.class as string | undefined }));
</script>Runtime events
Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.
HTML / JS events
bi:app-shell:collapsebi:app-shell:expandbi:app-shell:mobile-toggle
React callbacks
No React callback events are declared by this adapter.
Vue emits
No Vue emitted events are declared by this adapter.
Remote / AJAX
This component does not implement Byteion JS remote loading. Use normal HTML form submission, framework state, or your application data layer around it.
API Reference
No custom data attributes required. Uses standard HTML attributes.
HTML Data Attributes
No custom data attributes required.
React Props · AppShellProps
Extracted directly fromreact/src/components/AppShell.tsx.
export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
sidebar?: ReactNode;
header?: ReactNode;
footer?: ReactNode;
children?: ReactNode;
}Developer tips
Common mistakes
Production usage tips
data-bi-* attributes instead of styling hooks.
Premium examples
Advanced patterns available in Byteion Pro:
Related components
Unlock Premium Patterns
Get access to copy-paste ready Pro blocks, SaaS templates, and advanced data-tables built with this component.
Explore Pro Components