Overlays & Feedback for React and Tailwind CSS

Neo-Brutal

A printed poster that behaves like software: warm paper, ink outlines and hard shadows that press.

Neo-Brutal Dialog

A modal on the native <dialog>: a card-white panel on a 10 px hatched offset that pops in, with an h2 title, description, body (children), a ruled footer and a secondary close key.

Neo-Brutal Drawer

A side or bottom sheet with Dialog's behaviour, for filters, carts and long menus: a flat panel flush to its side with a 2 px ink edge (anchored, so no hatch), sliding in.

Neo-Brutal Dropdown Menu

A menu button built from items: actions, links, separators, headings (which start a labelled group) and shortcuts.

Neo-Brutal Tooltip

A short hint on hover (after delay) and on keyboard focus, for icon keys and terse controls: an ink chip with an arrow, fading in with a small scale.

Neo-Brutal Toaster

Renders the toast store: put <Toaster /> once in the root layout and call toast() from any client code.

Neo-Brutal Alert

An inline message on a status fill with an ink outline: a tone icon chip (volt success, tomato danger, cobalt info), a title, text and an optional action (an ink link with a 2 px underline).

Neo-Brutal Skeleton

Placeholder lines, blocks or circles in sliding paper-2 stripes, shown while content loads.

Neo-Brutal Spinner

A three-quarter ring in the current text colour, spinning, with screen-reader text.

Neo-Brutal Empty State

What an empty list or search shows, on a dashed ink-outlined card: an icon key on paper-2 (aria-hidden, never rotated), a short h3, one line of help and the action that fills it.

The body of a 404 page, filling one viewport under the navbar: the code stamped as the page's slab (decorative, aria-hidden; it lands with the entrance), the page's h1 in text-headline, a line of help, actions and ruled links to popular pages with arrows that nudge.

Noir Aurora

A night canvas lit by one northern-lights curtain, with hairline cards and moonlight headlines.

Everything in Noir Aurora

Noir Aurora Dialog

A modal on the native <dialog>: a lit overlay card with title, description, body (children), footer and a close button, rising out of a soft blur over a night scrim.

Noir Aurora Drawer

A side or bottom sheet with Dialog's behaviour, for filters, carts and long menus.

Noir Aurora Dropdown Menu

A menu button built from items: actions, links, separators, headings (which start a labelled group) and shortcuts, in a lit overlay tile; the highlighted item's icon turns aurora.

Noir Aurora Tooltip

A short hint on hover (after delay) and on keyboard focus, for icon buttons and terse controls: a small night bubble in both themes (Kbd inside reads light).

Noir Aurora Toaster

Renders the toast store: put <Toaster /> once in the root layout and call toast() from any client code.

Noir Aurora Alert

An inline message with a tone icon, title, text and an optional action, on a soft gradient of its tone.

Noir Aurora Skeleton

Placeholder lines, blocks or circles with a soft shimmer, shown while content loads.

Noir Aurora Spinner

A spinning ring in the current text colour, with screen-reader text.

Noir Aurora Empty State

What an empty list or search shows: a lit icon tile in two hairline rings over a faint aurora glow (aria-hidden), a short h3, one line of help and the action that fills it.

Noir Aurora Not Found

The body of a 404 page, filling one viewport under the navbar, under its own low aurora: a big silver code (decorative, aria-hidden), the page's h1, a line of help, actions and links to popular pages.

Soft Bento

Moulded objects on a warm oat canvas: soft tiles, rounded keys and a calm bento rhythm.

Everything in Soft Bento

Soft Bento Dialog

A modal on the native <dialog>: title, description, body (children), footer and a close button.

Soft Bento Drawer

A side or bottom sheet with Dialog's behaviour, for filters, carts and long menus.

Soft Bento Dropdown Menu

A menu button built from items: actions, links, separators, headings (which start a labelled group) and shortcuts.

Soft Bento Tooltip

A short hint on hover (after delay) and on keyboard focus, for icon buttons and terse controls.

Soft Bento Toaster

Renders the toast store: put <Toaster /> once in the root layout and call toast() from any client code.

Soft Bento Alert

An inline message with a tone icon, title, text and an optional action.

Soft Bento Skeleton

Placeholder lines, blocks or circles with a soft shimmer, shown while content loads.

Soft Bento Spinner

A spinning ring in the current text colour, with screen-reader text.

Soft Bento Empty State

What an empty list or search shows, in a pressed well: an icon in a small cluster of clay chips (aria-hidden), a short h3, one line of help and the action that fills it.

Soft Bento Not Found

The body of a 404 page, filling one viewport under the navbar: the code as clay tiles that land one by one, the middle one the blue block (decorative, aria-hidden), the page's h1, a line of help, actions and links to popular pages.

Swiss Tech Mono

A page that prints its own measured grid: paper, white tiles, ink and one signal red.

Everything in Swiss Tech Mono

Preview everything. Take three a day, free.

A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.

Create a free account See the plans