Sort Stack, animated React component

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

Add it to your project

1. 1

   Set up your project once

   You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

   npx shadcn@latest init -d

   Copy

   Starting from nothing? The Quick Start walks through the whole thing.

2. 2

   Connect the registry with your API key

   Sort Stack is a Pro item, so the CLI has to send your API key. Do this once per project:

   1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
   2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:

      NEXUS_API_KEY=nxs_your_key_here

      Copy
   3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:

      "registries": {
        "@nexus-labs": {
          "url": "https://www.nexus-ui.com/api/registry/{name}",
          "headers": {
            "Authorization": "Bearer ${NEXUS_API_KEY}"
          }
        }
      }

      Copy

More dashboards

• Pro

  NewSound

  Global Deploy
• Pro

  NewSound

  Storage Clean
• Pro

  NewSound

  Empty Chart
• Pro

  New

  Traffic Bars