Mischief

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

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.

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.

06Floating Index

A compact outline for long pages. It keeps the active section and reading progress visible without becoming another permanent sidebar.

07Shift Button

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

09Scroll to Top Button

A floating way back after someone has moved down a long page or scroll area. It stays hidden near the top.

10Ask AI

Hand someone a prepared, source-aware prompt in the AI assistant they already use, or let them copy it for another one.

11File Upload

A file picker and dropzone with clear validation and a visible queue. Connect your upload function when you need progress, cancel, and retry.

12File Thumbnail

A compact image preview for attachments, upload queues, and file lists. Browser image files work without any setup.

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.

04Signature Footer

A complete closing section with room for the useful links first and one oversized wordmark at the end.

08Image Gallery

A responsive image collection with equal and masonry layouts, plus a lightbox that handles focus, keyboard navigation, and scroll locking.

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