---
name: "@motokoui"
slug: "motokoui"
description: "Components, application blocks, templates, and starter kits for modern React applications."
category: "Forms"
tags: ["blocks", "buttons", "forms", "navigation", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "motoko-ui"
website: "https://motokoui.com"
github: "https://github.com/motoko-ui/motokoui"
registry: "https://www.motokoui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 10
generated_at: "2026-07-28T08:59:05.895Z"
---

# @motokoui

Components, application blocks, templates, and starter kits for modern React applications.

## Links

- Website: https://motokoui.com
- GitHub: https://github.com/motoko-ui/motokoui
- Registry JSON: https://www.motokoui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/motokoui
- This file: https://sh4dcn.vercel.app/md/motokoui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.motokoui.com/r/registry.json
pnpm dlx shadcn@latest add https://www.motokoui.com/r/registry.json
bunx shadcn@latest add https://www.motokoui.com/r/registry.json
# clone the source repo
git clone https://github.com/motoko-ui/motokoui.git
# fetch the raw registry index
curl -s https://www.motokoui.com/r/registry.json
```

## Components (10)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry:ui | A polished button with primary, secondary, and semantic variants. | `npx shadcn@latest add https://www.motokoui.com/r/button.json` |
| rainbow-button | registry:ui | A black (white in dark mode) button with an animated rainbow border. | `npx shadcn@latest add https://www.motokoui.com/r/rainbow-button.json` |
| input | registry:ui | A text field with Motoko surface styles, hover and focus borders. | `npx shadcn@latest add https://www.motokoui.com/r/input.json` |
| select | registry:ui | A compound dropdown with Motoko surface styles and a simple options kit. | `npx shadcn@latest add https://www.motokoui.com/r/select.json` |
| modal | registry:ui | A centered dialog with soft Motoko motion — blur, scale, and spring settle. | `npx shadcn@latest add https://www.motokoui.com/r/modal.json` |
| tabs | registry:ui | Animated pill tabs with the same soft motion used in Preview/Code. | `npx shadcn@latest add https://www.motokoui.com/r/tabs.json` |
| accordion | registry:ui | Soft Motoko disclosure panels — smooth height settle, content fade, and a rotating chevron. | `npx shadcn@latest add https://www.motokoui.com/r/accordion.json` |
| tooltip | registry:ui | A compact Motoko hint that appears on hover or focus. | `npx shadcn@latest add https://www.motokoui.com/r/tooltip.json` |
| notch | registry:ui | A morphing black toolbar — the shell expands into options with staggered motion. | `npx shadcn@latest add https://www.motokoui.com/r/notch.json` |
| theme-switcher | registry:ui | Lightweight light/dark control — icon, toggle, and segmented variants with smooth CSS motion. | `npx shadcn@latest add https://www.motokoui.com/r/theme-switcher.json` |

## For AI agents

```text
You are adding components from @motokoui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/motokoui.md) for the component list.
2. Fetch the machine-readable index: https://www.motokoui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: motokoui).
```