# ndekoui

> ndekoui is an open-source React library under the MIT licence: 685 components in 36 categories, 66 blocks, 10 templates and 72 primitives, built on Base UI, motion and Tailwind CSS 4. Every item animates its changes of state and installs with the shadcn CLI, with the theme and the primitives it uses.

## Install

Each item is a shadcn registry item at https://ui.ndekocode.dev/r/<name>.json. For example: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-28.json`.
Editors and assistants can also connect to the MCP server at https://ui.ndekocode.dev/mcp to search the catalogue, read the source of an item and get its install command.

## When to use it

- A React 19 app or site styled with Tailwind CSS 4 and set up with the shadcn CLI, in Next.js, Vite, React Router or another framework the CLI supports.
- Product screens, ready as blocks: app shells, auth, automations, billing, boards, calendars, changelog, chat, contact, ctas, dashboards, empty states, faqs, features, filters, footers, headers, heroes, integrations, legal, logo clouds, notifications, pricing, settings, task detail, task lists, team.
- Whole pages, ready as templates: application, marketing.
- Interfaces where state changes should be animated: the components use motion for their enter, exit and layout changes.
- Building with an AI assistant: connect the MCP server at https://ui.ndekocode.dev/mcp so the assistant searches the catalogue and installs finished items instead of writing them from scratch.

## Docs

- [Installation](https://ui.ndekocode.dev/docs/installation): set up a project and add the first item
- [MCP server](https://ui.ndekocode.dev/mcp/connect): connect Claude, Cursor, Codex and other MCP clients
- [Primitives](https://ui.ndekocode.dev/kit): the 72 building blocks every component uses
- [Registry index](https://ui.ndekocode.dev/r/registry.json): every item with its files, in the shadcn registry format

## Components

- [Accordion](https://ui.ndekocode.dev/components/accordion): 20 components
- [Activity](https://ui.ndekocode.dev/components/activity): 7 components
- [Alert](https://ui.ndekocode.dev/components/alert): 12 components
- [Side panel](https://ui.ndekocode.dev/components/aside): 7 components
- [Avatar](https://ui.ndekocode.dev/components/avatar): 23 components
- [Badge](https://ui.ndekocode.dev/components/badge): 13 components
- [Banner](https://ui.ndekocode.dev/components/banner): 12 components
- [Breadcrumb](https://ui.ndekocode.dev/components/breadcrumb): 8 components
- [Button](https://ui.ndekocode.dev/components/button): 64 components
- [Date picker](https://ui.ndekocode.dev/components/calendar-date-picker): 28 components
- [Checkbox](https://ui.ndekocode.dev/components/checkbox): 20 components
- [Comment](https://ui.ndekocode.dev/components/comment): 8 components
- [Dialog](https://ui.ndekocode.dev/components/dialog): 21 components
- [Dropdown menu](https://ui.ndekocode.dev/components/dropdown): 15 components
- [Event calendar](https://ui.ndekocode.dev/components/event-calendar): 7 components
- [File upload](https://ui.ndekocode.dev/components/file-upload): 14 components
- [Image cropper](https://ui.ndekocode.dev/components/image-cropper): 11 components
- [Input](https://ui.ndekocode.dev/components/input): 64 components
- [Modal](https://ui.ndekocode.dev/components/modal): 14 components
- [Navbar](https://ui.ndekocode.dev/components/navbar): 20 components
- [Notification](https://ui.ndekocode.dev/components/notification): 30 components
- [Pagination](https://ui.ndekocode.dev/components/pagination): 12 components
- [Popover](https://ui.ndekocode.dev/components/popover): 9 components
- [Radio](https://ui.ndekocode.dev/components/radio): 20 components
- [Select](https://ui.ndekocode.dev/components/select): 51 components
- [Slider](https://ui.ndekocode.dev/components/slider): 27 components
- [Stepper](https://ui.ndekocode.dev/components/stepper): 17 components
- [Sub-task](https://ui.ndekocode.dev/components/subtask): 7 components
- [Switch](https://ui.ndekocode.dev/components/switch): 17 components
- [Table](https://ui.ndekocode.dev/components/table): 20 components
- [Tabs](https://ui.ndekocode.dev/components/tabs): 20 components
- [Teams](https://ui.ndekocode.dev/components/teams): 9 components
- [Textarea](https://ui.ndekocode.dev/components/textarea): 19 components
- [Timeline](https://ui.ndekocode.dev/components/timeline): 12 components
- [Tooltip](https://ui.ndekocode.dev/components/tooltip): 12 components
- [Tree](https://ui.ndekocode.dev/components/tree): 15 components

## Blocks

- [App shells](https://ui.ndekocode.dev/blocks/app-shells): 3 entries
- [Auth](https://ui.ndekocode.dev/blocks/auth): 3 entries
- [Automations](https://ui.ndekocode.dev/blocks/automations): 1 entry
- [Billing](https://ui.ndekocode.dev/blocks/billing): 1 entry
- [Boards](https://ui.ndekocode.dev/blocks/boards): 2 entries
- [Calendars](https://ui.ndekocode.dev/blocks/calendars): 1 entry
- [Changelog](https://ui.ndekocode.dev/blocks/changelog): 1 entry
- [Chat](https://ui.ndekocode.dev/blocks/chat): 3 entries
- [Contact](https://ui.ndekocode.dev/blocks/contact): 1 entry
- [Ctas](https://ui.ndekocode.dev/blocks/ctas): 2 entries
- [Dashboards](https://ui.ndekocode.dev/blocks/dashboards): 4 entries
- [Empty states](https://ui.ndekocode.dev/blocks/empty-states): 3 entries
- [Faqs](https://ui.ndekocode.dev/blocks/faqs): 2 entries
- [Features](https://ui.ndekocode.dev/blocks/features): 3 entries
- [Filters](https://ui.ndekocode.dev/blocks/filters): 1 entry
- [Footers](https://ui.ndekocode.dev/blocks/footers): 5 entries
- [Headers](https://ui.ndekocode.dev/blocks/headers): 2 entries
- [Heroes](https://ui.ndekocode.dev/blocks/heroes): 3 entries
- [Integrations](https://ui.ndekocode.dev/blocks/integrations): 3 entries
- [Legal](https://ui.ndekocode.dev/blocks/legal): 1 entry
- [Logo clouds](https://ui.ndekocode.dev/blocks/logo-clouds): 2 entries
- [Notifications](https://ui.ndekocode.dev/blocks/notifications): 4 entries
- [Pricing](https://ui.ndekocode.dev/blocks/pricing): 2 entries
- [Settings](https://ui.ndekocode.dev/blocks/settings): 3 entries
- [Task detail](https://ui.ndekocode.dev/blocks/task-detail): 4 entries
- [Task lists](https://ui.ndekocode.dev/blocks/task-lists): 2 entries
- [Team](https://ui.ndekocode.dev/blocks/team): 4 entries

## Templates

- [Application](https://ui.ndekocode.dev/templates/application): 5 entries
- [Marketing](https://ui.ndekocode.dev/templates/marketing): 5 entries

## Motion components

- [Accordion](https://ui.ndekocode.dev/docs/accordion): core components
- [Animated Background](https://ui.ndekocode.dev/docs/animated-background): core components
- [Animated Group](https://ui.ndekocode.dev/docs/animated-group): core components
- [Border Beam](https://ui.ndekocode.dev/docs/border-beam): core components
- [Border Trail](https://ui.ndekocode.dev/docs/border-trail): core components
- [Carousel](https://ui.ndekocode.dev/docs/carousel): core components
- [Code Tree Viewer](https://ui.ndekocode.dev/docs/code-tree-viewer): core components
- [Cursor](https://ui.ndekocode.dev/docs/cursor): core components
- [Dialog](https://ui.ndekocode.dev/docs/dialog): core components
- [Directional Drawer](https://ui.ndekocode.dev/docs/directional-drawer): core components
- [Disclosure](https://ui.ndekocode.dev/docs/disclosure): core components
- [In View](https://ui.ndekocode.dev/docs/in-view): core components
- [Infinite Slider](https://ui.ndekocode.dev/docs/infinite-slider): core components
- [Post Card](https://ui.ndekocode.dev/docs/post-card): core components
- [Shine Border](https://ui.ndekocode.dev/docs/shine-border): core components
- [Terminal](https://ui.ndekocode.dev/docs/terminal): core components
- [Transition Panel](https://ui.ndekocode.dev/docs/transition-panel): core components
- [Text Effect](https://ui.ndekocode.dev/docs/text-effect): text effects
- [Text Loop](https://ui.ndekocode.dev/docs/text-loop): text effects
- [Text Morph](https://ui.ndekocode.dev/docs/text-morph): text effects
- [Text Roll](https://ui.ndekocode.dev/docs/text-roll): text effects
- [Text Scramble](https://ui.ndekocode.dev/docs/text-scramble): text effects
- [Text Shimmer](https://ui.ndekocode.dev/docs/text-shimmer): text effects
- [Text Shimmer Wave](https://ui.ndekocode.dev/docs/text-shimmer-wave): text effects
- [Word Roll](https://ui.ndekocode.dev/docs/word-roll): text effects
- [Highlighter](https://ui.ndekocode.dev/docs/highlighter): text effects
- [Text 3D Flip](https://ui.ndekocode.dev/docs/text-3d-flip): text effects
- [Word Rotate](https://ui.ndekocode.dev/docs/word-rotate): text effects
- [Animated Number](https://ui.ndekocode.dev/docs/animated-number): number effects
- [Motion Number](https://ui.ndekocode.dev/docs/motion-number): number effects
- [Sliding Number](https://ui.ndekocode.dev/docs/sliding-number): number effects
- [Confetti](https://ui.ndekocode.dev/docs/confetti): interactive elements
- [Dock](https://ui.ndekocode.dev/docs/dock): interactive elements
- [Glow Effect](https://ui.ndekocode.dev/docs/glow-effect): interactive elements
- [Hover Cards](https://ui.ndekocode.dev/docs/hover-cards): interactive elements
- [Image Comparison](https://ui.ndekocode.dev/docs/image-comparison): interactive elements
- [Magic Card](https://ui.ndekocode.dev/docs/magic-card): interactive elements
- [Magnified Dock](https://ui.ndekocode.dev/docs/magnified-doc): interactive elements
- [Scroll Progress](https://ui.ndekocode.dev/docs/scroll-progress): interactive elements
- [Spinning Text](https://ui.ndekocode.dev/docs/spinning-text): interactive elements
- [Spotlight](https://ui.ndekocode.dev/docs/spotlight): interactive elements
- [Spotlight Cards](https://ui.ndekocode.dev/docs/spotlight-cards): interactive elements
- [Tilt](https://ui.ndekocode.dev/docs/tilt): interactive elements
- [Toolbar Dynamic](https://ui.ndekocode.dev/docs/toolbar-dynamic): toolbars
- [Toolbar Expandable](https://ui.ndekocode.dev/docs/toolbar-expandable): toolbars
- [Magnetic](https://ui.ndekocode.dev/docs/magnetic): advanced effects
- [Morphing Dialog](https://ui.ndekocode.dev/docs/morphing-dialog): advanced effects
- [Morphing Popover](https://ui.ndekocode.dev/docs/morphing-popover): advanced effects
- [Progressive Blur](https://ui.ndekocode.dev/docs/progressive-blur): advanced effects
- [Horizontal Scroll](https://ui.ndekocode.dev/docs/horizontal-scroll): scroll effects
- [Scroll Animation](https://ui.ndekocode.dev/docs/scroll-animation): scroll effects
- [Scroll Text](https://ui.ndekocode.dev/docs/scroll-text): scroll effects
- [Scroll Text Marquee](https://ui.ndekocode.dev/docs/scroll-text-marquee): scroll effects
- [Smooth Scroll](https://ui.ndekocode.dev/docs/smooth-scroll): scroll effects
- [Stacking Cards](https://ui.ndekocode.dev/docs/stacking-cards): scroll effects
- [Sticky Scroll](https://ui.ndekocode.dev/docs/sticky-scroll): scroll effects
- [Timeline Animation](https://ui.ndekocode.dev/docs/timeline-animation): scroll effects
- [Scroll Velocity](https://ui.ndekocode.dev/docs/scroll-velocity): scroll effects
- [Image Accordion](https://ui.ndekocode.dev/docs/image-accordion): image effects
- [Image Reveal](https://ui.ndekocode.dev/docs/image-reveal): image effects
- [Image Tabs](https://ui.ndekocode.dev/docs/image-tabs): image effects
- [Image Trail](https://ui.ndekocode.dev/docs/image-trail): image effects
- [Lens](https://ui.ndekocode.dev/docs/lens): image effects
- [Animated Beam](https://ui.ndekocode.dev/docs/animated-beam): layout effects
- [Dotted Map](https://ui.ndekocode.dev/docs/dotted-map): layout effects
- [Globe](https://ui.ndekocode.dev/docs/globe): layout effects
- [Linear Modal](https://ui.ndekocode.dev/docs/linear-modal): layout effects
- [Marquee](https://ui.ndekocode.dev/docs/marquee): layout effects
- [Masonry Grid](https://ui.ndekocode.dev/docs/masonry-grid): layout effects
- [Orbiting Circles](https://ui.ndekocode.dev/docs/orbiting-circles): layout effects
- [Reorder List](https://ui.ndekocode.dev/docs/reorder-list): layout effects
- [Swap Grid](https://ui.ndekocode.dev/docs/swap-grid): layout effects
- [Android](https://ui.ndekocode.dev/docs/android): device mocks
- [iPhone](https://ui.ndekocode.dev/docs/iphone): device mocks
- [Safari](https://ui.ndekocode.dev/docs/safari): device mocks

## Optional

- [Full catalogue](https://ui.ndekocode.dev/llms-full.txt): every component, block and template with its description and install command
- [Author](https://ndekocode.dev): ndekocode