Skip to content

Noir Aurora

Input

Text input in a lit control box (bg-control, a line-2 border) with optional leading and trailing adornments.

Live, interactive React component · dark themeResponsive

About the Noir Aurora Input

Text input in a lit control box (bg-control, a line-2 border) with optional leading and trailing adornments. Focus turns the border aurora green with a soft halo; invalid turns it ember.

It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

The same piece, drawn for a different look. Open one to compare it live.

Neo-Brutal Input

Text input in an ink-outlined card-white box with optional leading and trailing adornments; focus lifts the box onto its focus shadow.

Soft Bento Input

Text input in a 14 px white field pressed into the surface, with optional leading and trailing adornments; the focus ring draws on the box.

Swiss Tech Mono Input

Text input in a box with optional leading and trailing adornments; text after the value sits in a haze affix.