SOROUSH.DESIGN
Design SystemMarkdownStyled System

AppBar

Renders as <header>. A top-level container for navigation, toolbars, and application headers.

Source

Renders as <header>. A top-level container for navigation, toolbars, and application headers. Applies a default elevation shadow from the theme and stretches to full width.

Examples

Default

Application Header
<AppBar color="paper">Application Header</AppBar>

Colors

color="paper"
color="primary"
color="secondary"
color="modal"
<Flex flexDirection="column">
  {(['paper', 'primary', 'secondary', 'modal'] as const).map((color) => (
    <AppBar key={color} color={color} mb={1}>
      <Flex flexDirection="row" alignItems="center" px={2} py={1.5}>
        <Typography variant="caption" color="secondary" m={0}>
          color="{color}"
        </Typography>
      </Flex>
    </AppBar>
  ))}
</Flex>

Sizes

size="sm"
size="md"
size="lg"
<Flex flexDirection="column">
  {(['sm', 'md', 'lg'] as const).map((size) => (
    <AppBar key={size} size={size} color="paper" mb={1}>
      <Flex flexDirection="row" alignItems="center">
        <Typography variant="caption" color="secondary" m={0}>
          size=&quot;{size}&quot;
        </Typography>
      </Flex>
    </AppBar>
  ))}
</Flex>

Positions

position="static"
position="relative"
position="sticky"
position="absolute"
position="fixed"
<Flex flexDirection="column">
  {(['static', 'relative', 'sticky'] as const).map((pos) => (
    <AppBar key={pos} position={pos} color="paper" mb={1}>
      <Flex flexDirection="row" alignItems="center" px={2} py={1.5}>
        <Typography variant="caption" color="secondary" m={0}>
          position=&quot;{pos}&quot;
        </Typography>
      </Flex>
    </AppBar>
  ))}
  {(['absolute', 'fixed'] as const).map((pos) => (
    <Flex key={pos} position="relative" height="48px" mb={1}>
      <AppBar position={pos} color="paper">
        <Flex flexDirection="row" alignItems="center" px={2} py={1.5}>
          <Typography variant="caption" color="secondary" m={0}>
            position=&quot;{pos}&quot;
          </Typography>
        </Flex>
      </AppBar>
    </Flex>
  ))}
</Flex>

Elevations

elevation=0
elevation=4
elevation=8
elevation=12
elevation=16
elevation=24
<Flex flexDirection="column">
  {([0, 4, 8, 12, 16, 24] as const).map((elevation) => (
    <AppBar key={elevation} elevation={elevation} color="paper" mb={1}>
      <Flex flexDirection="row" alignItems="center" px={2} py={1.5}>
        <Typography variant="caption" color="secondary" m={0}>
          elevation={elevation}
        </Typography>
      </Flex>
    </AppBar>
  ))}
</Flex>

Site Header

Masoud Soroush
Masoud Soroush
HomeExperienceStackArchitectureContact
StatusOPTIMIZED
<AppBar
  color="primary"
  flexDirection="row"
  alignItems="center"
  justifyContent="space-between"
  px={3}
  elevation={4}
  minHeight={64}
>
  {/* Logo */}
  <Flex flexDirection="row" alignItems="center" gap={2}>
    <Avatar variant="square" size="sm" src={Logo} alt="Masoud Soroush">
      <Typography variant="caption" color="primary" m={0}>
        M
      </Typography>
    </Avatar>
    <Typography variant="h6" color="secondary" m={0} fontFamily="monospace">
      Masoud Soroush
    </Typography>
  </Flex>

  {/* Nav */}
  <Flex flexDirection="row" alignItems="center" gap={3}>
    {NAV_LINKS.map((label, i) => (
      <Link
        key={label}
        underline="hover"
        color={i === 0 ? 'secondary' : 'initial'}
        m={0}
        fontFamily="monospace"
      >
        {label}
      </Link>
    ))}
  </Flex>

  {/* Actions */}
  <Flex flexDirection="row" alignItems="center" gap={1}>
    <View height="32px" mx={2} width="2px" bg="grid" />
    <Flex flexDirection="column" alignItems="flex-end">
      <Typography
        variant="caption"
        color="secondary"
        m={0}
        style={{ fontSize: '10px', letterSpacing: '0.2em', textTransform: 'uppercase' }}
      >
        Status
      </Typography>
      <Typography
        variant="caption"
        color="primary"
        m={0}
        style={{ fontFamily: 'monospace', fontSize: '12px' }}
      >
        OPTIMIZED
      </Typography>
    </Flex>
  </Flex>
</AppBar>

Frosted

Frosted Glass Header
blur + color="backdrop"
<AppBar
  color="backdrop"
  blur
  borderBottom="1px solid rgba(0,0,0,0.1)"
  flexDirection="row"
  alignItems="center"
  justifyContent="space-between"
  px={3}
  elevation={0}
  minHeight={64}
>
  <Typography variant="h6" color="secondary" m={0}>
    Frosted Glass Header
  </Typography>
  <Typography variant="caption" color="secondary" m={0}>
    blur + color="backdrop"
  </Typography>
</AppBar>