Family
Controls
Familiar inputs with more feedback than usual, and none of it required to operate them.
Components16
Familiar tabs with a gentle pull toward the pointer. Selection stays clear and keyboard navigation remains immediate.
02Elastic SliderA precise slider with a small amount of give at either end. The current value stays visible and the control works without a pointer.
03Hold ButtonA confirmation button for actions that deserve a second thought. Release early to cancel, or activate once with a keyboard.
04Shift ButtonA call to action that trades its leading icon for a directional cue when someone approaches it.
05Impossible CheckboxA checkbox with one stubborn rule: the bear will not let you leave it on. Best kept for demos, Easter eggs, and harmless preferences.
09Save BarA bar that exists only while a form has unsaved changes. It says so, saves, confirms, and leaves.
45Theme ToggleA light and dark switch that survives a reload, follows the system when asked, and stays in step across tabs.
46AccordionA list of disclosures built on native details elements, so find-in-page and the browser do the work.
80Copy ButtonCopies a value and says whether it worked, including when the clipboard refuses.
81Secret FieldAn API key or token: hidden until asked for, copied whole either way.
108Scrub BarThe seek control on its own: a slider that happens to be a timeline, announced in minutes and seconds.
109OTP InputA one time code, one box per character, where pasting the whole code into any box fills the rest.
110Tag InputAn input that turns what you typed into a removable tag, and gives the last one back when you press backspace on an empty field.
111ComboboxA field that narrows a list as you type, and holds one choice or several as removable chips.
112Sortable ListA list reordered by dragging a handle, or from the keyboard without one, where every move is announced.
114StepperWhere 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