Headers

Header with theme toggle

A ThemeToggle in the actions slot beside the primary button. It reads and writes the same theme your ThemeProvider does.

9 components34 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

ButtonNavbarNavbarActionsNavbarBrandNavbarLinkNavbarLinksNavbarToggleThemeProviderThemeToggle

Imports

import { Button, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarToggle, ThemeProvider, ThemeToggle } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import {
  Button,
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarLink,
  NavbarLinks,
  NavbarToggle,
  ThemeProvider,
  ThemeToggle,
} from '@the_viveksingh/vivek-ui'

export default function HeaderWithThemeToggle() {
  return (
    <ThemeProvider>
      <Navbar bordered container="lg">
        <NavbarBrand href="#">Palisade</NavbarBrand>
        <NavbarToggle />
        <NavbarLinks>
          <NavbarLink active href="#">
            Product
          </NavbarLink>
          <NavbarLink href="#">Pricing</NavbarLink>
          <NavbarLink href="#">Docs</NavbarLink>
          <NavbarLink href="#">Blog</NavbarLink>
        </NavbarLinks>
        <NavbarActions>
          <ThemeToggle size="sm" />
          <Button size="sm">Sign up</Button>
        </NavbarActions>
      </Navbar>
    </ThemeProvider>
  )
}
← All 62 blocks