git404hub

what is spark-ui fr?

codeweb-dev/spark-ui — explained in plain English

Analysis updated 2026-05-18

25TypeScriptAudience · developerLicense

tl;dr

An open source library of animated, accessible React UI components you install by copying source code into your own project.

vibe map

mindmap
  root((repo))
    What it does
      Copyable UI components
      Animated interactions
      Accessible by default
    Tech stack
      Next.js
      React
      Tailwind CSS
      Framer Motion
    Distribution
      shadcn CLI registry
      Docs site with previews
      AI agent skill
    Optional backend
      Supabase login
      Favorites feature
    Audience
      Frontend developers
      Designers building web apps

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Copy a single animated UI component's source code directly into a Next.js or React project.

VIBE 2

Browse a documentation site with live previews before installing a component.

VIBE 3

Add an AI agent skill so Claude Code or Cursor can install and customize components automatically.

VIBE 4

Enable optional GitHub login and favorites by connecting your own Supabase project.

what's the stack?

TypeScriptNext.jsReactTailwind CSSFramer Motion

how it stacks up fr

codeweb-dev/spark-uicuzteam/cpaprogamekohl/frame-ui
Stars252525
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasy
Complexity2/52/5
Audiencedeveloperops devopsdeveloper

Figures from each repo's GitHub metadata at analysis time.

in plain english

Spark UI is a collection of pre built visual building blocks, called components, for websites made with React. Instead of installing it as a normal package that stays hidden inside your project, you use a tool called the shadcn CLI to copy the actual source code of each component straight into your own codebase, so you fully own and can edit the code afterward. The components focus on expressive animation and distinctive visual style rather than being plain and generic. Every component supports both light and dark mode automatically through shared color settings, includes keyboard navigation and screen reader friendly markup, and respects a setting that reduces motion for people sensitive to animation. The project also ships a documentation website built with live previews, search, and copyable install commands, so you can see what a component looks like before adding it to your project. Under the hood, Spark UI is built with Next.js, React, and TypeScript, styled using Tailwind CSS, and animated using Framer Motion. To install a single component into your own app, you run a shadcn command pointing at that component's file on the Spark UI website, and the source code gets copied into your project. The project recommends reviewing a component's code before installing it, and states that installing a component never requires you to hand over any private files, passwords, or secret keys. The repository also includes an installable skill file that teaches AI coding assistants like Claude Code and Cursor how to browse, install, and customize Spark UI components correctly. Optional GitHub login and a favorites feature can be turned on by connecting your own Supabase backend project, but the site works fully without one. The project is open source under the MIT license, a permissive license that allows free use including commercial use.

prompts (copy fr)

prompt 1
Show me how to install the shimmer-text component from Spark UI into my Next.js project.
prompt 2
Explain how Spark UI's shadcn-based registry differs from installing a normal npm package.
prompt 3
Walk me through setting up Spark UI locally without a Supabase backend.
prompt 4
How do I add the Spark UI agent skill so my AI coding tool can use its components.

Frequently asked questions

what is spark-ui fr?

An open source library of animated, accessible React UI components you install by copying source code into your own project.

What language is spark-ui written in?

Mainly TypeScript. The stack also includes TypeScript, Next.js, React.

Who is spark-ui for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.