Layout With Sticky Navbar

Layout With Sticky Sidebar

Layout With Two Sidebars

import { Box, BoxProps } from '@chakra-ui/react'

export const Placeholder = (props: BoxProps) => {
  return <Box role="presentation" py="3" px="4" color="fg.accent.default" {...props} />
}


Placeholder.tsx

import { Box, BoxProps, Container } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Footer = (props: BoxProps) => {
  return (
    <Box as="footer" role="contentinfo" bg="bg.accent.default" {...props}>
      <Container>
        <Placeholder minH="20">Footer</Placeholder>
      </Container>
    </Box>
  )
}


Footer.tsx

import { Container, Flex, FlexProps } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Main = (props: FlexProps) => {
  return (
    <Flex as="main" role="main" direction="column" flex="1" py="16" {...props}>
      <Container flex="1">
        <Placeholder minH="lg" bg="bg.accent.default">
          Main
        </Placeholder>
      </Container>
    </Flex>
  )
}


Main.tsx

import { Box, Container } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Navbar = () => {
  return (
    <Box as="nav" role="navigation" bg="bg.accent.default">
      <Container>
        <Placeholder minH="20">Navigation</Placeholder>
      </Container>
    </Box>
  )
}


Navbar.tsx

import { Flex } from '@chakra-ui/react'
import { Footer } from './Footer'
import { Main } from './Main'
import { Navbar } from './Navbar'

export const App = () => {
  return (
    <Flex direction="column" flex="1">
      <Navbar />
      <Main />
      <Footer />
    </Flex>
  )
}


App.tsx

Layout With Full Content Height

Banners, carousels, and other components used to promote products and services.

Layouts