Tick Slider

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.

Friendly
FormalNeutralFriendlyPlayful

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form25 } from "@/components/beste/piece/form25";

<Form25
  label="Tone of voice"
  ticks={[
    "Formal",
    "Neutral",
    "Friendly",
    "Playful"
  ]}
  tickIndex={2}
  value="Friendly"
/>

More Form pieces

View all Form
16
1224

Stepped Slider

form30

Font-size slider with discrete tick dots under the rail and a mono value chip in the header.

Mira & Co.
Shown on invoices and in the team directory.

Labeled Input

form1

Standard text field with a label on top and a muted helper line under the control.

mira@beste.co

Floating Label

form6

Focused input with the label shrunk to the top-left corner and a blinking caret after the value.

design systemstypographymotionType and press ↵
Up to 8 tags. Use hyphens instead of spaces.

Tag Input

form14

Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.

Segmented Control

form24

Pill-grouped segmented control with inset muted track and a raised card under the active choice.

Assign to
Filter people…
Beste Sözen
Beste Sözen
Andrea Kim
Andrea Kim
Noor Ahmed
Noor Ahmed
Jules Park
Jules Park

Assignee Picker

form20

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.