Length field with a timer icon, h and m unit-annotated number tiles, and an HH:MM format hint.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Input21 } from "@/components/beste/piece/input21";
<Input21
label="Session length"
hours={1}
minutes={45}
/>Time control with hour and minute tiles separated by a colon, plus a small AM or PM segmented toggle.
Joined from-arrow-to range input with a muted duration chip capping the right side of the control.
Oversized text field with large type and a fatter caret, made for hero sections and prompt bars.
Bare text input atom with a focused state that adds a primary ring and a blinking caret after the value.
Date field with a leading calendar icon, mono ISO value, and a chevron hinting at a popover.
Dark mono code field with a language eyebrow, line-number gutter, and content lines on a foreground canvas.