Headers

Header with an announcement bar

A slim announcement strip above the header for a launch, a sale or an incident notice, with the bar itself unchanged.

8 components47 linesServer safeSource on GitHub

Live demo

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

What it uses

Button Navbar NavbarActions NavbarBrand NavbarLink NavbarLinks NavbarToggle Text

Imports

import { Button, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarToggle, Text } 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,
  Text,
} from '@the_viveksingh/vivek-ui'

export default function HeaderAnnouncement() {
  return (
    <>
      <div
        style={{
          padding: '0.5rem 1rem',
          textAlign: 'center',
          background: 'var(--vk-color-primary)',
          color: 'var(--vk-color-primary-fg)',
        }}
      >
        <Text as="span" size="sm">
          Version 1.0 is out — 109 components, zero dependencies.{' '}
          <a href="/blog/v1" style={{ color: 'inherit', fontWeight: 600 }}>
            Read the announcement →
          </a>
        </Text>
      </div>
      <Navbar bordered container="lg">
        <NavbarBrand href="#">VivekUI</NavbarBrand>
        <NavbarToggle />
        <NavbarLinks>
          <NavbarLink active href="#">
            Product
          </NavbarLink>
          <NavbarLink href="#">Pricing</NavbarLink>
          <NavbarLink href="#">Docs</NavbarLink>
          <NavbarLink href="#">Blog</NavbarLink>
        </NavbarLinks>
        <NavbarActions>
          <Button size="sm">Install</Button>
        </NavbarActions>
      </Navbar>
    </>
  )
}

← All 62 blocks