Layout Components

Layout components provide the structural foundation for your application's user interface. These components help organize content, create visual hierarchy, and improve the overall user experience.

Overview

ShellUI's layout components are designed to work together seamlessly, providing flexible and responsive containers for your content while maintaining accessibility and performance.

Available Components

Card

Container component for content organization

Dialog

Modal dialog overlay component

Sheet

Slide-out panel component

Drawer

Mobile-friendly slide-out drawer

Popover

Floating content container

Tooltip

Contextual information display

Separator

Visual content divider

Scroll Area

Custom scrollable container

Resizable

Draggable resize panels

Collapsible

Expandable/collapsible content

Accordion

Expandable content sections

Breadcrumb

Navigation breadcrumb trail

Layout Principles

ShellUI layout components follow these design principles:

Responsive Design

All layout components are mobile-first and responsive by default, adapting to different screen sizes automatically.

Accessibility

Components include proper ARIA attributes, keyboard navigation, and screen reader support.

Performance

Optimized for both Blazor Server and WebAssembly scenarios with efficient rendering.

Composability

Components can be nested and combined to create complex layouts easily.

Getting Started

# Add layout components to your project
shellui add card dialog sheet popover tooltip

Common Layout Patterns

Content Cards

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <!-- Your content here -->
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

<Dialog>
  <DialogTrigger>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description</DialogDescription>
    </DialogHeader>
    <!-- Dialog content -->
  </DialogContent>
</Dialog>

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>