Font-size slider with discrete tick dots under the rail and a mono value chip in the header.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Form30 } from "@/components/beste/piece/form30";
<Form30
label="Font size"
min={12}
max={24}
step={1}
value={16}
marks={[
12,
14,
16,
18,
20,
22,
24
]}
/>Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.
Multi-line field with a character counter that turns amber near the limit and rose past it.
Focused input with the label shrunk to the top-left corner and a blinking caret after the value.
Standard text field with a label on top and a muted helper line under the control.
Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.
Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.