Primitives

Small building blocks that keep apps consistent — all server-component safe.

Keyboard-key chips. Pair with formatHotkey to render registered shortcuts (mod becomes ⌘ on macOS, Ctrl elsewhere).

Ctrl+KEsc↵

Snippet

import { Kbd, formatHotkey } from '@creo-team/buzz-ui/client'

<Kbd>{formatHotkey('mod+k')}</Kbd>

Snippet

import { Spinner } from '@creo-team/buzz-ui/server'

<Spinner size="md" label="Loading results" />

Above the line

Below the line

Left

Right

Snippet

<Separator />
<Separator orientation="vertical" className="h-4" />

Snippet

import { Avatar, AvatarGroup } from '@creo-team/buzz-ui/server'

<AvatarGroup max={3}>
	<Avatar name="Ada Lovelace" />
	<Avatar name="Grace Hopper" />
	<Avatar name="Alan Turing" />
	<Avatar name="Katherine Johnson" />
	<Avatar name="Edsger Dijkstra" />
</AvatarGroup>

The label/help/error chrome all Buzz UI form controls use — wrap your own controls to get identical wiring.

Custom control

Anything can live inside a Field

Snippet

import { Field } from '@creo-team/buzz-ui/server'

<Field htmlFor="volume" label="Volume" error={error}>
	<MyCustomControl id="volume" />
</Field>

Screen-reader-only content — this card contains a hidden heading you can hear but not see.

Snippet

import { VisuallyHidden } from '@creo-team/buzz-ui/server'

<button>
	<TrashIcon aria-hidden />
	<VisuallyHidden>Delete item</VisuallyHidden>
</button>