Looking for our SaaS starter kits?

They're now available at saas-js.com

Learn more
All posts
article·November 24, 2023

Saas UI v2.4 is here!

We got some nifty new components and improvements for you in this release.

Posted by

EW

Eelco Wiersma

@eelcodotdev

What's new in v2.4?

New Components

Improvements

The Navbar component represents a top navigation bar that typically contains links or buttons for navigating to different sections of a website or application.

Usage

The Navbar component can be used together with AppShell and supports different placement modes, static, sticky. It can also be easily styled to add a glass effect for example.

Here's a full example with a workspace dropdown, search input and user menu.

import { AppShell } from '#components/ui/app-shell'
import { Breadcrumb } from '#components/ui/breadcrumb'
import { Menu } from '#components/ui/menu'
import { Navbar } from '#components/ui/navbar'
import { Persona } from '#components/ui/persona/persona-composed'
import { SearchInput } from '#components/ui/search-input'
import { Box, Button, Container, Stack } from '@chakra-ui/react'
import { Skeleton, SkeletonText } from '#components/ui/skeleton'
import { SaasUIIcon } from '@saas-ui/assets'
import { FiChevronDown } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      header={
        <Navbar.Root position="sticky" borderBottomWidth="1px">
          <Navbar.Content>
            <Navbar.ItemGroup>
              <Breadcrumb.Root>
                <Breadcrumb.Item>
                  <Menu.Root>
                    <Menu.Trigger asChild>
                      <Button variant="ghost">
                        <SaasUIIcon height="24px" />
                        Saas UI
                        <FiChevronDown />
                      </Button>
                    </Menu.Trigger>
                    <Menu.Content>
                      <Menu.ItemGroup title="Workspaces">
                        <Menu.Item value="saas-ui">Saas UI</Menu.Item>
                        <Menu.Item value="acme">Acme</Menu.Item>
                      </Menu.ItemGroup>
                      <Menu.Separator />
                      <Menu.Item value="create">Create workspace</Menu.Item>
                    </Menu.Content>
                  </Menu.Root>
                </Breadcrumb.Item>
                <Breadcrumb.CurrentLink>Overview</Breadcrumb.CurrentLink>
              </Breadcrumb.Root>
            </Navbar.ItemGroup>
            <Navbar.ItemGroup justifyContent="end" gap="4">
              <Box width="180px">
                <SearchInput size="sm" />
              </Box>
              <Menu.Root>
                <Menu.Trigger asChild>
                  <Button variant="ghost" p="0">
                    <Persona.Root presence="online">
                      <Persona.Avatar
                        src="/showcase-avatar.jpg"
                        name="Beatriz"
                        size="xs"
                      />
                    </Persona.Root>
                  </Button>
                </Menu.Trigger>
                <Menu.Content>
                  <Menu.ItemGroup title="beatriz@saas-ui.dev">
                    <Menu.Item value="profile">Profile</Menu.Item>
                    <Menu.Item value="settings">Settings</Menu.Item>
                    <Menu.Item value="help">Help &amp; feedback</Menu.Item>
                  </Menu.ItemGroup>
                  <Menu.Separator />
                  <Menu.Item value="logout">Log out</Menu.Item>
                </Menu.Content>
              </Menu.Root>
            </Navbar.ItemGroup>
          </Navbar.Content>
        </Navbar.Root>
      }
    >
      <Box as="main" flex="1" py="2" px="4">
        <Container
          maxW="container.xl"
          pt="8"
          px="8"
          display="flex"
          flexDirection="column"
          margin="0 auto"
        >
          <Stack gap="4" mb="14">
            <Skeleton width="100px" height="24px" />
            <SkeletonText />
          </Stack>
          <Stack direction="row" gap="8" mb="14">
            <Stack gap="4" flex="1">
              <Skeleton width="100px" height="20px" />
              <SkeletonText />
            </Stack>
            <Stack gap="4" flex="1">
              <Skeleton width="100px" height="20px" />
              <SkeletonText />
            </Stack>
          </Stack>
          <Stack direction="row" gap="8" mb="14">
            <Stack gap="4" flex="1">
              <Skeleton width="100px" height="20px" />
              <SkeletonText />
            </Stack>
            <Stack gap="4" flex="1">
              <Skeleton width="100px" height="20px" />
              <SkeletonText />
            </Stack>
          </Stack>
        </Container>
      </Box>
    </AppShell>
  )
}

IconBadge

The IconBadge component represents a badge with an icon.

Usage

The IconBadge component can be used to display a badge with an icon.

import { IconBadge } from '#components/ui/icon-badge'
import { FiUser } from 'react-icons/fi'

export default function Page() {
  return <IconBadge icon={<FiUser />} />
}