Installation

Most of the components and tools offered by this library can be obtained through the registry or the ndk npm packages.

Using the ndk registry

The simplest way is through the copy-paste method popularized by shadcn/ui. Simply copy and paste component source files from their doc pages or use an automated approach with the shadcn/cli.

If you are using shadcn components in your project, you will have to make some edits to the components.json file first before you can use the shadcn/cli. However you can still use the cli to fetch resources from the registry even if you don't use shadcn/ui components, but in this case you'd still have to create a components.json file in the root of your project - this is the only requirement by the shadcn/cli.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks" 
  },
  "iconLibrary": "lucide",
  "registries": { 
    "@ndk": "https://ndk-ui.vercel.app/r/{name}.json"
  } 
}

When done, you can fetch a resource using this command:

npx shadcn@latest add @ndk/<resource-name>

Example of <resource-name>s (they are provided under the installation sections of the doc pages of every component):

For more info, visit the shadcn/registry docs.

Using the ndk packages

Before we get started, make sure you have a react app ready with tailwindcss configured.

npm install @_ndk/ui @_ndk/motion

@import "tailwindcss";

/* main stylesheets */
@import "@_ndk/ui/tokens";
@import "@_ndk/ui/themes/neutral.css";

/* modules */
@import "@_ndk/ui/fonts";
@import "@_ndk/ui/typography";

/* rest of styles */

<MotionStagger preset="blurIn" once={true} staggerDelay={0.5}>
    <div className="text-muted-foreground">
        Test out these components from the library.
    </div>
</MotionStagger>