Mischief

Family

Controls

Familiar inputs with more feedback than usual, and none of it required to operate them.

Components16

01Magnetic Tabs

Familiar tabs with a gentle pull toward the pointer. Selection stays clear and keyboard navigation remains immediate.

02Elastic Slider

A precise slider with a small amount of give at either end. The current value stays visible and the control works without a pointer.

03Hold Button

A confirmation button for actions that deserve a second thought. Release early to cancel, or activate once with a keyboard.

04Shift Button

A call to action that trades its leading icon for a directional cue when someone approaches it.

05Impossible Checkbox

A checkbox with one stubborn rule: the bear will not let you leave it on. Best kept for demos, Easter eggs, and harmless preferences.

09Save Bar

A bar that exists only while a form has unsaved changes. It says so, saves, confirms, and leaves.

45Theme Toggle

A light and dark switch that survives a reload, follows the system when asked, and stays in step across tabs.

46Accordion

A list of disclosures built on native details elements, so find-in-page and the browser do the work.

80Copy Button

Copies a value and says whether it worked, including when the clipboard refuses.

81Secret Field

An API key or token: hidden until asked for, copied whole either way.

108Scrub Bar

The seek control on its own: a slider that happens to be a timeline, announced in minutes and seconds.

109OTP Input

A one time code, one box per character, where pasting the whole code into any box fills the rest.

110Tag Input

An input that turns what you typed into a removable tag, and gives the last one back when you press backspace on an empty field.

111Combobox

A field that narrows a list as you type, and holds one choice or several as removable chips.

112Sortable List

A list reordered by dragging a handle, or from the keyboard without one, where every move is announced.

114Stepper

Where someone is in something with a beginning and an end, said in words as well as drawn.

Installing one

Each of these copies its source into your project, the same as any other component in the registry.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/magnetic-tabs

Other families