Add individual components to your React project, then make them your own. The CLI copies editable source into your codebase, so you control the styling and behavior.
Components · Docs · npm · Contributing · Community
Every clip is recorded from the live component pages. Watch in 1080p.
Workflow Card interaction preview
A single theme-synced checklist card with soft disclosure, gliding hover feedback, status selection, and teammate filters.
| Desktop | Mobile |
|---|---|
 |
 |
- React and TypeScript components styled with Tailwind CSS.
- Motion built on GSAP and Motion. Some components add WebGL shaders through OGL or three.js.
- A live preview, the full source, and prop controls for every component in the component studio.
- A CLI and a shadcn-compatible registry that copy the source into your codebase and install its dependencies.
The studio canvas toolbar lets you move the component, pan an infinite grid, and zoom from 25% to 200%. Choose Interact to use the component normally. In Move or Pan mode, drag the canvas or use the arrow keys (Shift for larger steps); Escape returns to Interact. Click the zoom percentage to reset position and zoom. The customization button opens the shared controls, including Pixel Card settings.
Keyboard movement covers 10 screen pixels per arrow press, or 50 with Shift. Moving a component divides this distance by its parent's zoom scale; panning moves the camera outside that scale, so it uses the screen distance directly.
You need a React project with Tailwind CSS and the @/ import alias. The installation guide covers setup and manual installation.
Add a component:
npx @devclubnst/ui@latest add ditherThe CLI writes the component into your UI directory and installs its dependencies with your package manager. If components.json sets aliases.ui to an @/ path, it uses that. Otherwise it picks src/components/ui or components/ui.
Your app imports the copied files directly. The CLI is an installation tool; components still use their declared dependencies, such as GSAP or Motion.
Then import it like any other file in your project:
import { Dither } from "@/components/ui/dither";
export default function Hero() {
return (
<section className="relative h-[480px] overflow-hidden rounded-3xl">
<Dither className="absolute inset-0" />
<h1 className="relative p-12 text-5xl text-white">Ship something that moves.</h1>
</section>
);
}Add several at once, list everything, or get help:
npx @devclubnst/ui@latest add orbit-gallery morph-search mac-switch
npx @devclubnst/ui@latest list
npx @devclubnst/ui@latest --helpThe CLI works with pnpm dlx and bunx as well.
Projects already set up for shadcn can install straight from the public registry:
npx shadcn@latest add https://ui.devclubxnst.com/r/dither.jsonThe registry docs describe the catalog and the component JSON format.
| Resource | What's there |
|---|---|
| Component studio | Live previews, props, and source for every component |
| Installation | Setup with the CLI or by copying source |
| Theming | Matching components to your design tokens |
| CLI | Every command and flag |
| Registry | The shadcn-compatible catalog format |
| Skills | GSAP guidance for AI coding agents working on this repo |
We want contributions: new components, bug fixes, accessibility work, and docs. Start with CONTRIBUTING.md. Issues labelled good first issue are a good place to begin.
How a change gets in:
- Fork the repo and branch from
main. - Open a PR to
mainwith a Conventional Commit title, for examplefeat(dither): add grain intensity prop. - CI runs lint, typecheck, tests, two builds, CodeQL, dependency review, a DCO sign-off check, and a supply-chain check that confirms the published registry matches the source.
- A bot labels the PR by size, from
size/xstosize/excess. Smaller PRs get reviewed faster, andexcessPRs get asked to split. - One code owner approves and the PR is squash-merged.
You need Node.js 20.9 or newer (CI builds on 20.x and 22.x) and npm 10 or newer. Use npm, since the repo ships package-lock.json. There are no native modules or system libraries to install.
git clone https://github.com/devclub-nstru/component_library.git
cd component_library
npm ci # exact versions from package-lock.json
npm run dev # docs site at http://localhost:3000| Task | Command | Output |
|---|---|---|
| Production build of the docs site | npm run build, then npm start |
.next/, served on port 3000 |
| Registry | npm run registry:sync |
public/r/*.json, registry.json and the npm-only r/ |
| CLI | Nothing to build. Run node bin/cli.mjs --help. |
bin/cli.mjs is plain ESM with no dependencies |
| npm package | npm run registry:sync && npm pack |
devclubnst-ui-<version>.tgz |
Before pushing, run the same checks as CI:
npm run lint
npm run typecheck
npm test
npm run build
npm run check:lockfileIf you change component source or registry metadata, run npm run registry:sync and commit the regenerated files in public/r/.
| Document | What's there |
|---|---|
| CHANGELOG.md | Functional and security changes in each release |
| GOVERNANCE.md | Roles, responsibilities, and who has access to the repo, npm and hosting |
| docs/ARCHITECTURE.md | Components, actors, data flows and trust boundaries |
| docs/INTERFACES.md | CLI commands and exit codes, registry JSON, HTTP API, npm package |
| docs/DEPENDENCIES.md | How dependencies are chosen, installed and kept up to date |
| docs/SECURITY_ASSESSMENT.md | Threat model and residual risks |
| docs/DEPLOYMENT.md | How the site is built, deployed to the VPS and rolled back |
| .github/MAINTAINING.md | Release process and maintainer procedures |
Report vulnerabilities privately through GitHub security advisories, not in a public issue. SECURITY.md covers what's in scope, response times, and the supply-chain protections on this repo.
Ask questions and share ideas in issues or on the community page. Release notes are in CHANGELOG.md and on GitHub releases, and published versions are on npm. You can also email softwaredevg.club@rishihood.edu.in.
MIT. Built by DevClub. Dependencies keep their own licenses.