Herbst UI beta

Autumn has arrived!

Herbst UI

Your project, now in the best season of the year

herbst-ui v0.0.7

Bring Autumn Into Your Project

More than 65 Angular components with the colors of a German autumn. Install with the CLI, get the code in your project and change whatever you want.

Get startedView components
the components below

Get started

Ready in minutes, not days.

One CLI command copies a component into your project. The code is yours, already typed, accessible and using the theme.

Read the docs
terminal
$ npx herbst-ui@latest init
$ npx herbst-ui add button calendar command
✓ 3 components added to src/app/shared/ui
button, calendar and command ready to import

Live components

Every component, live on the page.

A sample of the library to try right here: click, toggle and type. The examples run the real code, and the docs have every detail.

HB·011 Button
HB·032 Input
HB·061 Switch
HB·063 Tabs
OverviewUsageAPI

import { HbTabsImports } from '@herbst/ui'

HB·052 Segmented

view · grid

HB·017 Checkbox
HB·006 Avatar
KHLHMV
KHNABS
HB·007 Badge
DefaultSecondaryOutlineClearOvercastStorm
HB·045 Pagination

page · 2 / 7

HB·036 Kbd
Open the search ⌘K
Toggle dark mode ⌘D
HB·002 Alert
Season changed
Autumn arrived in Bavaria overnight.
HB·010 Breadcrumb
HB·048 Progress
Leaves turning 34%
Daylight left 72%
HB·050 Radio
HB·056 Skeleton
Browse all components →

Theming

Paper by day, Dusk by night.

Every color and size lives in one file, theme.css, as oklch CSS variables on Tailwind v4. Change a value and every component follows, in light and dark mode.

--background

--foreground

--card

--primary

--secondary

--muted

--accent

--border

--ring

--destructive

--success

--warning

theme.css
:root {
--primary: oklch(0.545 0.155 42);
--background: oklch(0.973 0.005 95);
--radius: 0.375rem;
}
.dark {
--primary: oklch(0.620 0.155 45);
}
Explore the theme

Build

Build interfaces with little code.

Import the component, add the selector to your template and you are done. Typed inputs, signals and accessibility come built in. The code on the side renders exactly what you see below it.

Start building
specimen.component.html
<hb-alert
hbTitle="Season changed"
hbDescription="Autumn arrived in Bavaria overnight." />
Preview
Season changed
Autumn arrived in Bavaria overnight.

Open source

Build Herbst UI with us.

Herbst UI is open source. Open an issue, contribute a component or star the repository to follow the updates.

Star on GitHub Contributing guide