Good interfacesdeservea little mischief.
Useful React components with a playful streak. Copy the source, tune the details, and make them yours.
Your agent can browse Mischief too
Install the skill once, then ask for a component by name.
Try: Use $mischief-ui to add magnetic-tabs.
01 / Tactile controls
Magnetic Tabs
Familiar tabs with a gentle pull toward the pointer. The active surface stays clear, and keyboard navigation remains immediate.
Preview, API, and sourceEverything important is close by.
Your download is ready and notifications are on.
02 / Tactile controls
Elastic Slider
A precise slider with a small amount of give at either end. The value is always visible and the control works without a pointer.
Preview, API, and source03 / Tactile controls
Hold Button
Hold to confirm an action that deserves a second thought. Releasing early cancels it. Keyboard and assistive technology users can press once.
Preview, API, and source04 / Layout
Signature Footer
A useful closing section with one strong final gesture. Put the links first, then let the oversized wordmark sign off.
Preview, API, and source05 / Playful extras
Impossible Checkbox
Try to turn it on. The bear has other plans. Keep this one for demos, Easter eggs, and preferences that do not matter.
Preview, API, and source06 / Wayfinding
Floating Index
A small outline that stays nearby on long pages. It tracks the active section, shows reading progress, and opens when you need to jump.
Preview, API, and source01
Keep your place.
The index stays close while the page keeps moving.
Scroll this frame to try it.
02
See where you are.
Open it for the full outline, or glance at the progress ring.
03
Jump without getting lost.
Choose a section and the index follows you there.
07 / Actions
Shift Button
A call to action that clears a path as you approach it. The leading icon steps aside and a directional cue takes its place.
Preview, API, and source08 / Block
Image Gallery
A responsive collection with two useful layouts and a proper lightbox. Arrow keys move through the set and focus returns when you close it.
Preview, API, and sourceFrom the archive
6 imagesGood questions
Frequently asked questions
The practical bits before you copy anything. Still unsure? Open an issue on GitHub.
Is Mischief free to use?
Yes. Mischief is MIT licensed. You can use it in personal and commercial projects. The only condition is that you keep the copyright and permission notice in copies or substantial parts of the software. Read the license.
Should I use the shadcn registry or npm?
Use the shadcn registry when you want the source in your project and plan to change it. Use npm when you prefer package imports and versioned updates. Every component page shows both options.
Will the components match my shadcn theme?
Yes. Registry components use semantic shadcn tokens such as background, foreground, border, muted, and ring. Installing one does not add a global Mischief theme.
What is the difference between a component and a block?
Both are reusable React components. A block handles a larger part of a page and composes more behavior. Signature Footer and Image Gallery install the same way as the smaller controls and expose typed props.
Which projects does Mischief support?
Mischief supports React 18 and 19 with Tailwind CSS 4. It works with Next.js, Vite, React Router, and other React setups supported by shadcn.
Are the components accessible?
They are built for keyboard, touch, pointer, screen readers, and reduced motion where applicable. Each component page explains its behavior. If you change that behavior, test the changed version again.
Can my coding agent install components for me?
Yes. Install the Mischief skill once, then ask your agent for a component by name. The command is in the homepage hero and the project README.