Mischief UI

Overview

Mischief UI is an MIT-licensed shadcn registry of 117 accessible React components that add small, playful touches to practical UI. The set ranges from controls with a bit of give, such as an elastic slider and magnetic tabs, to document viewers, agent chat interfaces and theme-driven shader backgrounds.

Components use semantic shadcn tokens (background, foreground, border, muted, ring), so they pick up an existing theme on install. Each component page offers both a shadcn registry install, for owning and editing the source, and an npm package for versioned imports. The project also publishes a skill.md file for coding agents.

Features

• Playful controls: Magnetic tabs, elastic slider, hold-to-confirm button, shift button and an "impossible" checkbox.
• Document tools: PDF, DOCX, CSV and JSON viewers, plus redaction, bounding boxes, annotation layers and a signature pad.
• Agent UI: Conversation, prompt input, streaming text, tool calls, chain of thought, subagent tree, token meter and model picker.
• Voice and media: Voice input, mic selector, bar visualizer, audio and video players, and an animated orb.
• Wayfinding: Floating index with reading progress, command palette, table of contents and scroll-to-top button.
• Scenes and shaders: Metaballs, aurora, plasma, caustics, constellation fields, dither images and a wireframe globe drawn from theme colors.
• Data table: Resizable, keyboard-navigable columns with row selection, striped and compact modes.

Tech stack

• React, shadcn/ui tokens, Base UI, motion, three.js, pdfjs-dist, mammoth, lucide-react

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @mischief/component-name