---
title: Page templates
description: Full-page layout templates for quickly spinning up new pages with Click UI components.
category: Templates
related: [Container, Title, Panel, Spacer]
---

Source: https://clickhouse.design/click-ui/templates

# Page templates

Complete full-page layout templates that combine multiple patterns into ready-to-use page structures. These are designed to be copy-paste ready for AI tools and developers to quickly spin up new pages. For smaller reusable component compositions, see Common Patterns.

## Application layout with sidebar

A complete application layout with sidebar navigation, header, and main content area. This template matches the standard ClickHouse application layout with a persistent sidebar and main content area.

```tsx
import {
Container,
Title,
Text,
Button,
SidebarNavigationItem,
SidebarCollapsibleItem,
SidebarNavigationTitle,
Avatar,
Icon,
Spacer,
Panel,
} from '@clickhouse/click-ui'
import { useState } from 'react'

function ApplicationLayout() {
const [selectedNav, setSelectedNav] = useState('dashboards')
const [serviceOpen, setServiceOpen] = useState(true)

return (
  <Container orientation='horizontal' fillHeight>
    {/* Sidebar */}
    <Container
      orientation='vertical'
      gap='md'
      padding='md'
      fillWidth={false}
      style={{ width: '240px' }}
    >
      <SidebarCollapsibleItem
        label='Analytics service'
        icon='aws'
        open={serviceOpen}
        onOpenChange={setServiceOpen}
      >
        <SidebarNavigationItem
          label='SQL console'
          icon='monitor'
          selected={selectedNav === 'sql'}
          onClick={() => setSelectedNav('sql')}
          level={1}
        />
        <SidebarNavigationItem
          label='Dashboards'
          icon='bar-chart'
          selected={selectedNav === 'dashboards'}
          onClick={() => setSelectedNav('dashboards')}
          level={1}
        />
        <SidebarNavigationItem
          label='Data sources'
          icon='globe'
          selected={selectedNav === 'sources'}
          onClick={() => setSelectedNav('sources')}
          level={1}
        />
        <SidebarNavigationItem
          label='Backups'
          icon='refresh'
          selected={selectedNav === 'backups'}
          onClick={() => setSelectedNav('backups')}
          level={1}
        />
      </SidebarCollapsibleItem>

      <SidebarNavigationItem
        label='Settings'
        icon='sliders'
        selected={selectedNav === 'settings'}
        onClick={() => setSelectedNav('settings')}
      />
      <SidebarNavigationItem
        label='Monitoring'
        icon='camera'
        selected={selectedNav === 'monitoring'}
        onClick={() => setSelectedNav('monitoring')}
      />
      <SidebarNavigationItem
        label='Help'
        icon='help-circle'
        selected={selectedNav === 'help'}
        onClick={() => setSelectedNav('help')}
      />

      <Spacer size='md' />

      <Container orientation='vertical' gap='sm'>
        <Button type='primary' label='Connect' iconLeft='plug' fillWidth />
        <Button type='secondary' label='Ask AI' iconLeft='sparkles' fillWidth />
      </Container>

      <Spacer size='lg' />

      <Container orientation='vertical' gap='sm'>
        <Panel padding='sm' color='muted'>
          <Container orientation='horizontal' gap='xs' alignItems='center'>
            <Icon name='clock' size='sm' />
            <Text size='sm' color='muted'>Your trial will expire in 23 days</Text>
          </Container>
        </Panel>

        <SidebarNavigationTitle label='Organization' />
        <SidebarNavigationItem
          label='Rhubarb Inc'
          icon='file'
          iconDir='end'
        />

        <Spacer size='sm' />

        <SidebarNavigationItem
          label='Integrations'
          icon='settings'
        />
        <SidebarNavigationItem
          label='Chat with Support'
          icon='message-circle'
        />
        <SidebarNavigationItem
          label='All systems operational'
          icon='check-circle'
        />
      </Container>
    </Container>

    {/* Main Content Area */}
    <Container orientation='vertical' fillWidth>
      {/* Header */}
      <Panel
        orientation='horizontal'
        justifyContent='space-between'
        alignItems='center'
        padding='md'
        hasBorder
        style={{ borderTop: 'none', borderLeft: 'none', borderRight: 'none' }}
      >
        <Container orientation='horizontal' gap='sm' alignItems='center'>
          <Icon name='clickhouse' size='lg' />
          <Title type='h2' size='md'>Page title</Title>
        </Container>

        <Container orientation='horizontal' gap='sm' alignItems='center'>
          <Button type='empty' iconLeft='bell' />
          <Avatar text='CM' textSize='sm' />
          <Button type='primary' label='Add new object' />
        </Container>
      </Panel>

      {/* Main Content */}
      <Container orientation='vertical' gap='lg' padding='lg' fillWidth>
        <Text>Main content area - add your page content here</Text>
      </Container>
    </Container>
  </Container>
)
}
```

## Usage tips

1. **Copy the entire template** - The template is self-contained and ready to use
2. **Customize as needed** - Replace placeholder data with your actual data
3. **Add state management** - Connect to your data source or API
4. **Follow the patterns** - Use this template as a starting point for similar pages