React componentswith a little mischief.

117 accessible components for shadcn projects. Sliders with a little give, a data table you can live in, everything an agent shows while it works, and a microphone that draws what it hears.

Browse 117 components See them running

Install from npm, opens in a new tab · MIT licensed · Using a coding agent? Give it skill.md.

This backdrop is a component, drawn from your theme. Move your pointer through it.

Keep your place.

The index stays close while the page keeps moving.

Scroll this frame to try it.

See where you are.

Open it for the full outline, or glance at the progress ring.

Jump without getting lost.

Choose a section and the index follows you there.

WayfindingFloating Index

Why is the migration failing?

The unique index is created before the backfill runs, so rows still holding a null email collide.

Can you reorder it?

Yes. Moving the backfill above the index is enough, and the test suite passes after that.

What about existing rows?

They are covered by the same backfill, so nothing else needs to change.

Agent UIConversation

Selected: Payment window

DocumentsBounding Boxes

src/upload/retry.ts3/3 hunks+3-1

@@ -1 +1 @@+1 -1
-export function retry(run, attempts = 3) {
+export function retry(run, attempts = 3, wait = 200) {
let last
@@ -7 +7 @@+1 -0
} catch (error) {
last = error
+ sleep(wait * 2 ** at)
}
}
@@ -14 +15 @@+1 -0

export function onReconnect(socket, run) {
+ socket.removeEventListener("open", run)
socket.addEventListener("open", run)
}

ScenesConnection Beam

Gooey

ScenesMetaballs

Two theme colours and an ordered dither, the way a newspaper did it.

ScenesDither Image

Five regions. Drag to spin it.

ScenesWireframe Globe

Subscriptions
	Email
Ada Lovelace	[email protected]	Workshop	24	2 Nov 2026
Barbara Liskov	[email protected]	Sketch	1	30 Aug 2026
Grace Hopper	[email protected]	Studio	8	18 Sept 2026
Katherine Johnson	[email protected]	Workshop	40	11 Dec 2026
Radia Perlman	[email protected]	Studio	12	24 Jan 2027
5 people			85

1 of 5 selected. Drag a column edge, or focus one and use the arrow keys.

BlocksData Table

Browse all 117 components

Filter by family, or search the lot.

Good questions

Frequently asked questions

The practical bits before you copy anything. Still unsure? Open an issue on GitHub., opens in a new tab

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. Ask it to read mischief-ui/skill.md, opens in a new tab, follow the instructions, and add a component by name. The same file is available through the standard Agent Skills discovery endpoint.