Marble Progress, animated React component

Add it to your project

1. 1

   Prepare your project

   You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

   npx shadcn@latest init

   Copy

   Then add the Nexus registry to your components.json (the registries key is the part that matters):

   {
     "$schema": "https://ui.shadcn.com/schema.json",
     "style": "default",
     "rsc": true,
     "tsx": true,
     "tailwind": {
       "css": "src/app/globals.css",
       "baseColor": "neutral",
       "cssVariables": true,
       "prefix": ""
     },
     "aliases": {
       "components": "@/components",
       "utils": "@/lib/utils",
       "ui": "@/components/ui",
       "lib": "@/lib",
       "hooks": "@/hooks"
     },
     "registries": {
       "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
     }
   }

   Copy
2. 2

   Add the component

   Run this from your project root. It adds the component, the utilities it uses and its packages.

   npx shadcn@latest add @nexus-labs/marble-progress

   Copy
3. 3

   Check what was added

   With the standard aliases, these files land in your project:

   components/

   marble-progress/

   index.ts

   marble-progress.tsx

   Copy
4. 4

   Copying by hand? Install the packages

   Skip this if you used the command above.

   npm install framer-motion matter-js

   Copy
5. 5

   Use it in a page

   Import it and render it. The Code tab above has the full example.

   // app/page.tsx
   import { MarbleProgress } from "@/components/marble-progress";
   
   export default function Page() {
     return (
       <main>
         <MarbleProgress />
       </main>
     );
   }

   Copy