mirror of
https://github.com/block/buzz.git
synced 2026-11-12 04:12:21 +00:00
31b53e1afd
Signed-off-by: Arjun Mahanti <arjun@squareup.com> Co-authored-by: Codex <noreply@openai.com>
69 lines
3.0 KiB
Markdown
69 lines
3.0 KiB
Markdown
# Buzz UI
|
|
|
|
Open-source React components with Buzz's semantic roles, Inter typography, and
|
|
Lucide icons. Behavior comes from public Base UI primitives; calendar and resize
|
|
behavior come from DayPicker and react-resizable-panels. No internal package,
|
|
font CDN, Storybook server, or native Buzz bridge is required.
|
|
|
|
From the repository root:
|
|
|
|
```sh
|
|
. ./bin/activate-hermit
|
|
pnpm install --frozen-lockfile
|
|
pnpm --filter buzz-desktop-next dev
|
|
# Open http://localhost:5173/design
|
|
pnpm --filter @buzz/ui build
|
|
```
|
|
|
|
## Consume
|
|
|
|
```tsx
|
|
import '@fontsource-variable/inter/index.css';
|
|
import '@fontsource/jetbrains-mono/index.css';
|
|
import { Button, Field, Input } from '@buzz/ui';
|
|
|
|
<Field.Root name="name">
|
|
<Field.Label>Name</Field.Label>
|
|
<Input required />
|
|
<Field.Error />
|
|
</Field.Root>
|
|
<Button variant="primary">Continue</Button>
|
|
```
|
|
|
|
The workspace export includes the source CSS; use a Tailwind 4 PostCSS pipeline.
|
|
For a consumer without Tailwind, build the package and use `@buzz/ui/dist` plus
|
|
`@buzz/ui/dist/styles.css`. Build output keeps React and behavior libraries external.
|
|
The package is intentionally private until package naming and release automation
|
|
are agreed; it is fully usable from this open-source workspace.
|
|
|
|
The stylesheet includes the shared theme and Tailwind reset. Load it once at the
|
|
application boundary. Set `class="dark"` on the document root for dark mode.
|
|
Font packages belong to the host, allowing self-hosted subsets without remote requests.
|
|
|
|
## Component contract
|
|
|
|
Compound families retain Base UI's API: `Dialog.Root`, `Dialog.Trigger`,
|
|
`Dialog.Portal`, `Dialog.Backdrop`, `Dialog.Popup`, `Dialog.Title`, and
|
|
`Dialog.Close`. Use `render={<Button />}` to skin triggers and closes. Supply a
|
|
Title and Description for dialogs and popovers. Label inputs with Field.Label;
|
|
label standalone controls directly. IconButton requires an accessible name.
|
|
|
|
Behavioral Root, Portal, and state helpers are direct exports, preserving generics,
|
|
refs, controlled state, and events. Styled parts merge both string and state-function
|
|
class names. The underlying libraries own focus management, keyboard navigation,
|
|
ARIA semantics, and dismissal. Caller-supplied labels and composition still matter.
|
|
|
|
Button variants: primary, secondary, outline, ghost, danger, link. Sizes: sm, md,
|
|
lg. Loading disables duplicate activation while preserving the accessible name.
|
|
Color, type, geometry, and motion are roles; components never consume color ramps.
|
|
BarChart covers nonnegative categorical bars with a semantic data table, not a
|
|
full chart grammar. Carousel is manually advanced, without autoplay or drag.
|
|
|
|
Naming differences from shadcn: Menu is DropdownMenu; PreviewCard is HoverCard;
|
|
OTPField is InputOTP; Field.Label is Label; Toast replaces Sonner's role; BarChart
|
|
is the initial Chart treatment. Sheet composes Dialog. No shadcn API compatibility
|
|
or proprietary BlockUI package compatibility is implied.
|
|
|
|
See `../../desktop-next/OPEN_SOURCE.md` for provenance and `THIRD_PARTY_NOTICES.md`
|
|
for upstream notices. New source is covered by the repository's Apache-2.0 license.
|