UI ComponentsLayout
View
Generic view container for App layouts - equivalent to Page for Sites
Generic view container for applications. Views are to Apps what Pages are to Sites.
Structure
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ breadcrumbs: Home / Users / John │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌───────────────────────────────┐ ┌───────────┐ │ │
│ │ │ 👤 title │ │ actions │ │ │
│ │ │ description │ │ [+ New] │ │ │
│ │ └───────────────────────────────┘ └───────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ tabs (optional) │ │
│ │ │ Overview │ Activity │ Settings │ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ content │ │
│ │ │ │
│ │ {children} │ │
│ │ │ │
│ │ - or loading spinner │ │
│ │ - or error message │ │
│ │ - or empty state │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<View
title="Users"
description="Manage your team members"
icon="users"
breadcrumbs={[
{ label: 'Home', href: '/' },
{ label: 'Users' },
]}
actions={[
{ label: 'Add User', icon: 'plus', action: 'create' },
{ label: 'Export', icon: 'download', variant: 'outline' },
]}
tabs={[
{ id: 'all', label: 'All Users' },
{ id: 'active', label: 'Active' },
{ id: 'invited', label: 'Invited' },
]}
activeTab="all"
>
<UserTable users={users} />
</View>States
// Loading
<View title="Users" loading>
<UserTable />
</View>
// Error
<View title="Users" error={{ message: 'Failed to load users' }}>
<UserTable />
</View>
// Empty
<View
title="Users"
empty={{
icon: 'users',
title: 'No users yet',
description: 'Get started by adding your first team member',
action: { label: 'Add User', action: 'create' },
}}
>
<UserTable users={[]} />
</View>