Color Input

Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.

Mira violet#6D5EFA

New here? Read the installation guide.

Import & use
import { Input20 } from "@/components/beste/piece/input20";

<Input20
  label="Accent color"
  hex="#6D5EFA"
  name="Mira violet"
/>

More Input pieces

View all Input
typescript
12
const answer = 42;return answer * 2;

Code Input

Dark mono code field with a language eyebrow, line-number gutter, and content lines on a foreground canvas.

Ξ
0x4A81…6fA0ENS
Ethereum · Mainnet

Wallet Input

Crypto address field with a gradient Ξ avatar, shortened mono address, and an ENS lookup chip.

/^[a-z]+@beste\.co$/gi42

Regex Input

Regex field with slash delimiters, flag suffix in amber, and an emerald match-count pill on the right.

passport-scan.pdf842 KB

File Input

File picker with a muted Choose file button on the left and the selected filename and size on the right.

$12,480.00USD

Currency Input

Money field with a leading currency symbol, right-aligned mono amount, and a unit label.

2026-04-23▼

Date Input

Date field with a leading calendar icon, mono ISO value, and a chevron hinting at a popover.

Markdown version