shadcn-labs/snapcn

A shadcn registry of Remotion components for product demo videos. Install a text reveal, device frame, terminal session, logo sting or a whole scene with a command.

What it solves

Creating high-quality software product demos is often tedious, leading many to rely on simple screen recordings. snapcn provides a library of professional, programmable video components specifically designed for software showcases—such as AI chat streams, terminal sessions, and device frames—that maintain visual consistency with a project's design system.

How it works

Built on React and Remotion, snapcn offers a collection of components that can be installed via the shadcn CLI. These components are copied directly into the user's codebase, allowing for full ownership and customization. It leverages a theme system (SnapCnTheme) to ensure the video's UI matches the app's UI tokens. To improve visual quality, it implements specific motion fixes like geometricPrecision to eliminate judder in animated text.

Who it’s for

Developers and product teams who want to create polished, programmatic video demos of their software without manually eyeballing animations or drifting from their design system.

Highlights

  • Software-centric components: Includes specialized shots like AI answer streams, search typing, and terminal simulators.
  • Design system integration: Reuses shadcn surface tokens so video UI stays synced with product UI.
  • ** markdown-driven installation**: Components are added via the shadcn CLI and owned outright by the developer.
  • AI Agent support: Provides specific "skills" and context files (llms.txt) to help coding agents assemble videos and select the right components.

Related

  • Project
  • Project
  • Project
  • Project