Introduction
Small collection.
High bar.
Mischief adds physical feedback and a little personality to familiar controls. Every component is open source, theme-aware, and usable with a keyboard, touch, pointer, or screen reader where applicable.
Choose how you install
The shadcn registry copies source into your project. This is the recommended path because the component becomes yours. The npm package is useful when you want ordinary dependency updates or a quick look at the exported API.
The components
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.
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.
06Floating IndexA compact outline for long pages. It keeps the active section and reading progress visible without becoming another permanent sidebar.
07Shift ButtonA call to action that trades its leading icon for a directional cue when someone approaches it.
The blocks
Blocks are reusable React components too. They simply cover a larger part of a page and compose more behavior. Install them the same way, then replace their content through props.
Compatibility
- React 18 and 19
- Tailwind CSS 4
- shadcn CLI 4
- Next.js, Vite, React Router, and other React projects supported by shadcn
- Light and dark themes through semantic shadcn tokens