Message input that highlights @-mentions in sky and #channel tags in violet amid plain body text.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Input27 } from "@/components/beste/piece/input27";
<Input27
label="Thread"
tokens={[
{
"text": "Can we ping "
},
{
"text": "mira",
"type": "at"
},
{
"text": " about the "
},
{
"text": "launch-prep",
"type": "hash"
},
{
"text": " agenda?"
}
]}
/>Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.
Dark mono code field with a language eyebrow, line-number gutter, and content lines on a foreground canvas.
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.
Inline email field with a mail icon and a primary submit button docked on the right.
Five-star rater with filled amber stars in muted tiles and a decimal rating chip to the right.