Range Calendar, animated React component

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

   Range Calendar 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
3. 3

   Add the component

   Run this from your project root. It adds the component, the helpers it imports and its npm packages.

   npx shadcn@latest add @nexus-labs/range-calendar

   Copy
4. 4

   Check what was added

   With a project made as in the Quick Start (a src/ folder), these files land in it:

   components/

   range-calendar/

   index.ts

   range-calendar.tsx

   Copy
5. 5

   Copying by hand? Skip the registry

   Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

   npm install framer-motion

   Copy

   Then show the source and create each file at the path it gives:

   Show the source files
6. 6

   Use it in a page

   Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

   // src/app/page.tsx
   import { RangeCalendar } from "@/components/range-calendar";
   
   export default function Page() {
     return (
       <main>
         <RangeCalendar />
       </main>
     );
   }

   Copy