Akoder

Overview

Akoder is a registry of 22 motion-rich React components published from the personal site of Aditya Ojha, a developer who builds SaaS products in public. Each component installs with the shadcn CLI, and the set leans toward portfolio and product UI: data visualizations, AI prompt pieces, theme controls and small interactive games.

The components are built on Tailwind CSS v4 and Radix UI, with Motion handling most of the animation. Several are self-contained, such as a dependency-free SVG dotted world map, while others bring in specific libraries like matter.js for a physics skill cloud or cmdk for a command palette.

Features

• Data visualizations: A dotted SVG world map with heat tinting and markers, a 52-week GitHub-style contribution map and textured progress bars.
• AI interface pieces: A model picker filtered by provider, a prompt bar with context chips and an Ask AI launcher.
• Navigation: A ⌘K command palette with drill-down pages, a section rail with scroll tracking and an IDE-style project explorer.
• Theme controls: A visual light, dark and system theme switcher and a sun and moon mode toggle built on next-themes.
• Interactive extras: A matter.js physics skill cloud, a dot-lattice snake game and a rolodex-style stack.
• Content blocks: Fluid testimonial card, emoji reactions, animated todo list, contact channels and a multi-package-manager copy command block.
• Carousel: Touch-swipeable with spring animations and keyboard navigation.

Tech stack

• React, Next.js
• Tailwind CSS v4
• Radix UI, Motion
• cmdk, date-fns, matter-js, next-themes

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @akoder/component-name