---
name: "@moduix-react"
slug: "moduix-react"
description: "Ark-first React components, blocks, and themes with native CSS, available as a package or a shadcn-compatible copy-owned registry."
category: "Animated components"
tags: ["animation", "auth", "blocks", "buttons", "cards", "dashboard", "forms", "loaders", "media", "mobile", "navigation", "onboarding", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "Blinks44"
website: "https://moduix.dev"
github: "https://github.com/Blinks44/moduix"
registry: "https://moduix.dev/r/react/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 99
generated_at: "2026-07-28T08:00:50.948Z"
---

# @moduix-react

Ark-first React components, blocks, and themes with native CSS, available as a package or a shadcn-compatible copy-owned registry.

## Links

- Website: https://moduix.dev
- GitHub: https://github.com/Blinks44/moduix
- Registry JSON: https://moduix.dev/r/react/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/moduix-react
- This file: https://sh4dcn.vercel.app/md/moduix-react.md

## Install

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

## Components (99)

| name | type | description | install |
| --- | --- | --- | --- |
| init | registry:base | Initialize shadcn for moduix React and install the shared foundation files. | `npx shadcn@latest add https://moduix.dev/r/react/init.json` |
| core | registry:item | Shared framework-neutral styles and utilities for moduix registry components. | `npx shadcn@latest add https://moduix.dev/r/react/core.json` |
| foundation | registry:item | React-specific icons and shared foundation dependencies for moduix React registry components. | `npx shadcn@latest add https://moduix.dev/r/react/foundation.json` |
| theme-contrast | registry:theme | High-clarity moduix tokens with stronger borders and focus states for technical interfaces. | `npx shadcn@latest add https://moduix.dev/r/react/theme-contrast.json` |
| theme-dense | registry:theme | Compact moduix tokens with a structured blue palette for admin and data-heavy interfaces. | `npx shadcn@latest add https://moduix.dev/r/react/theme-dense.json` |
| theme-soft | registry:theme | Rounded moduix tokens with a warmer violet palette for product workflows. | `npx shadcn@latest add https://moduix.dev/r/react/theme-soft.json` |
| accordion | registry:item | moduix React Accordion component. | `npx shadcn@latest add https://moduix.dev/r/react/accordion.json` |
| angle-slider | registry:item | moduix React AngleSlider component. | `npx shadcn@latest add https://moduix.dev/r/react/angle-slider.json` |
| alert | registry:item | moduix React Alert component. | `npx shadcn@latest add https://moduix.dev/r/react/alert.json` |
| aspect-ratio | registry:item | moduix React AspectRatio component. | `npx shadcn@latest add https://moduix.dev/r/react/aspect-ratio.json` |
| avatar | registry:item | moduix React Avatar component. | `npx shadcn@latest add https://moduix.dev/r/react/avatar.json` |
| badge | registry:item | moduix React Badge component. | `npx shadcn@latest add https://moduix.dev/r/react/badge.json` |
| bleed | registry:item | moduix React Bleed component. | `npx shadcn@latest add https://moduix.dev/r/react/bleed.json` |
| breadcrumbs | registry:item | moduix React Breadcrumbs component. | `npx shadcn@latest add https://moduix.dev/r/react/breadcrumbs.json` |
| button | registry:item | moduix React Button component. | `npx shadcn@latest add https://moduix.dev/r/react/button.json` |
| card | registry:item | moduix React Card component. | `npx shadcn@latest add https://moduix.dev/r/react/card.json` |
| checkbox | registry:item | moduix React Checkbox component. | `npx shadcn@latest add https://moduix.dev/r/react/checkbox.json` |
| close-button | registry:item | moduix React CloseButton component. | `npx shadcn@latest add https://moduix.dev/r/react/close-button.json` |
| collapsible | registry:item | moduix React Collapsible component. | `npx shadcn@latest add https://moduix.dev/r/react/collapsible.json` |
| combobox | registry:item | moduix React Combobox component. | `npx shadcn@latest add https://moduix.dev/r/react/combobox.json` |
| color-picker | registry:item | moduix React ColorPicker component. | `npx shadcn@latest add https://moduix.dev/r/react/color-picker.json` |
| command-palette | registry:item | moduix React CommandPalette component. | `npx shadcn@latest add https://moduix.dev/r/react/command-palette.json` |
| container | registry:item | moduix React Container component. | `npx shadcn@latest add https://moduix.dev/r/react/container.json` |
| date-input | registry:item | moduix React DateInput component. | `npx shadcn@latest add https://moduix.dev/r/react/date-input.json` |
| date-picker | registry:item | moduix React DatePicker component. | `npx shadcn@latest add https://moduix.dev/r/react/date-picker.json` |
| clipboard | registry:item | moduix React Clipboard component. | `npx shadcn@latest add https://moduix.dev/r/react/clipboard.json` |
| dialog | registry:item | moduix React Dialog component. | `npx shadcn@latest add https://moduix.dev/r/react/dialog.json` |
| drawer | registry:item | moduix React Drawer component. | `npx shadcn@latest add https://moduix.dev/r/react/drawer.json` |
| empty | registry:item | moduix React Empty component. | `npx shadcn@latest add https://moduix.dev/r/react/empty.json` |
| editable | registry:item | moduix React Editable component. | `npx shadcn@latest add https://moduix.dev/r/react/editable.json` |
| field | registry:item | moduix React Field component. | `npx shadcn@latest add https://moduix.dev/r/react/field.json` |
| file-upload | registry:item | moduix React FileUpload component. | `npx shadcn@latest add https://moduix.dev/r/react/file-upload.json` |
| fieldset | registry:item | moduix React Fieldset component. | `npx shadcn@latest add https://moduix.dev/r/react/fieldset.json` |
| floating-panel | registry:item | moduix React FloatingPanel component. | `npx shadcn@latest add https://moduix.dev/r/react/floating-panel.json` |
| heading | registry:item | moduix React Heading component. | `npx shadcn@latest add https://moduix.dev/r/react/heading.json` |
| highlight | registry:item | moduix React Highlight component. | `npx shadcn@latest add https://moduix.dev/r/react/highlight.json` |
| image | registry:item | moduix React Image component. | `npx shadcn@latest add https://moduix.dev/r/react/image.json` |
| image-cropper | registry:item | moduix React ImageCropper component. | `npx shadcn@latest add https://moduix.dev/r/react/image-cropper.json` |
| input | registry:item | moduix React Input component. | `npx shadcn@latest add https://moduix.dev/r/react/input.json` |
| input-group | registry:item | moduix React InputGroup component. | `npx shadcn@latest add https://moduix.dev/r/react/input-group.json` |
| kbd | registry:item | moduix React Kbd component. | `npx shadcn@latest add https://moduix.dev/r/react/kbd.json` |
| lightbox | registry:item | moduix React Lightbox component. | `npx shadcn@latest add https://moduix.dev/r/react/lightbox.json` |
| list | registry:item | moduix React List component. | `npx shadcn@latest add https://moduix.dev/r/react/list.json` |
| listbox | registry:item | moduix React Listbox component. | `npx shadcn@latest add https://moduix.dev/r/react/listbox.json` |
| tree-view | registry:item | moduix React TreeView component. | `npx shadcn@latest add https://moduix.dev/r/react/tree-view.json` |
| marquee | registry:item | moduix React Marquee component. | `npx shadcn@latest add https://moduix.dev/r/react/marquee.json` |
| menu | registry:item | moduix React Menu component. | `npx shadcn@latest add https://moduix.dev/r/react/menu.json` |
| native-select | registry:item | moduix React Native Select component. | `npx shadcn@latest add https://moduix.dev/r/react/native-select.json` |
| number-input | registry:item | moduix React NumberInput component. | `npx shadcn@latest add https://moduix.dev/r/react/number-input.json` |
| pin-input | registry:item | moduix React PinInput component. | `npx shadcn@latest add https://moduix.dev/r/react/pin-input.json` |
| pagination | registry:item | moduix React Pagination component. | `npx shadcn@latest add https://moduix.dev/r/react/pagination.json` |
| password-input | registry:item | moduix React PasswordInput component. | `npx shadcn@latest add https://moduix.dev/r/react/password-input.json` |
| popover | registry:item | moduix React Popover component. | `npx shadcn@latest add https://moduix.dev/r/react/popover.json` |
| hover-card | registry:item | moduix React HoverCard component. | `npx shadcn@latest add https://moduix.dev/r/react/hover-card.json` |
| progress-circular | registry:item | moduix React ProgressCircular component. | `npx shadcn@latest add https://moduix.dev/r/react/progress-circular.json` |
| progress-linear | registry:item | moduix React ProgressLinear component. | `npx shadcn@latest add https://moduix.dev/r/react/progress-linear.json` |
| qr-code | registry:item | moduix React QR Code component. | `npx shadcn@latest add https://moduix.dev/r/react/qr-code.json` |
| radio-group | registry:item | moduix React RadioGroup component. | `npx shadcn@latest add https://moduix.dev/r/react/radio-group.json` |
| rating-group | registry:item | moduix React RatingGroup component. | `npx shadcn@latest add https://moduix.dev/r/react/rating-group.json` |
| scroll-area | registry:item | moduix React ScrollArea component. | `npx shadcn@latest add https://moduix.dev/r/react/scroll-area.json` |
| segment-group | registry:item | moduix React SegmentGroup component. | `npx shadcn@latest add https://moduix.dev/r/react/segment-group.json` |
| signature-pad | registry:item | moduix React Signature Pad component. | `npx shadcn@latest add https://moduix.dev/r/react/signature-pad.json` |
| select | registry:item | moduix React Select component. | `npx shadcn@latest add https://moduix.dev/r/react/select.json` |
| separator | registry:item | moduix React Separator component. | `npx shadcn@latest add https://moduix.dev/r/react/separator.json` |
| simple-grid | registry:item | moduix React Simple Grid component. | `npx shadcn@latest add https://moduix.dev/r/react/simple-grid.json` |
| skeleton | registry:item | moduix React Skeleton component. | `npx shadcn@latest add https://moduix.dev/r/react/skeleton.json` |
| slider | registry:item | moduix React Slider component. | `npx shadcn@latest add https://moduix.dev/r/react/slider.json` |
| splitter | registry:item | moduix React Splitter component. | `npx shadcn@latest add https://moduix.dev/r/react/splitter.json` |
| sidebar | registry:item | moduix React Sidebar component. | `npx shadcn@latest add https://moduix.dev/r/react/sidebar.json` |
| carousel | registry:item | moduix React Carousel component. | `npx shadcn@latest add https://moduix.dev/r/react/carousel.json` |
| spinner | registry:item | moduix React Spinner component. | `npx shadcn@latest add https://moduix.dev/r/react/spinner.json` |
| split-button | registry:item | moduix React SplitButton component. | `npx shadcn@latest add https://moduix.dev/r/react/split-button.json` |
| stack | registry:item | moduix React Stack component. | `npx shadcn@latest add https://moduix.dev/r/react/stack.json` |
| steps | registry:item | moduix React Steps component. | `npx shadcn@latest add https://moduix.dev/r/react/steps.json` |
| swap | registry:item | moduix React Swap component. | `npx shadcn@latest add https://moduix.dev/r/react/swap.json` |
| switch | registry:item | moduix React Switch component. | `npx shadcn@latest add https://moduix.dev/r/react/switch.json` |
| tag | registry:item | moduix React Tag component. | `npx shadcn@latest add https://moduix.dev/r/react/tag.json` |
| tags-input | registry:item | moduix React TagsInput component. | `npx shadcn@latest add https://moduix.dev/r/react/tags-input.json` |
| table | registry:item | moduix React Table component. | `npx shadcn@latest add https://moduix.dev/r/react/table.json` |
| tabs | registry:item | moduix React Tabs component. | `npx shadcn@latest add https://moduix.dev/r/react/tabs.json` |
| text | registry:item | moduix React Text component. | `npx shadcn@latest add https://moduix.dev/r/react/text.json` |
| textarea | registry:item | moduix React Textarea component. | `npx shadcn@latest add https://moduix.dev/r/react/textarea.json` |
| timer | registry:item | moduix React Timer component. | `npx shadcn@latest add https://moduix.dev/r/react/timer.json` |
| typeset | registry:item | moduix React Typeset component. | `npx shadcn@latest add https://moduix.dev/r/react/typeset.json` |
| toast | registry:item | moduix React Toast component. | `npx shadcn@latest add https://moduix.dev/r/react/toast.json` |
| toggle | registry:item | moduix React Toggle component. | `npx shadcn@latest add https://moduix.dev/r/react/toggle.json` |
| toggle-group | registry:item | moduix React ToggleGroup component. | `npx shadcn@latest add https://moduix.dev/r/react/toggle-group.json` |
| tooltip | registry:item | moduix React Tooltip component. | `npx shadcn@latest add https://moduix.dev/r/react/tooltip.json` |
| tour | registry:item | moduix React Tour component. | `npx shadcn@latest add https://moduix.dev/r/react/tour.json` |
| login-simple | registry:block | A copy-owned email and password sign-in form built with moduix React components. | `npx shadcn@latest add https://moduix.dev/r/react/login-simple.json` |
| sign-up | registry:block | A copy-owned account creation form built with moduix React components. | `npx shadcn@latest add https://moduix.dev/r/react/sign-up.json` |
| forgot-password | registry:block | A copy-owned password reset request form built with moduix React components. | `npx shadcn@latest add https://moduix.dev/r/react/forgot-password.json` |
| reset-password | registry:block | A copy-owned new password form built with moduix React components. | `npx shadcn@latest add https://moduix.dev/r/react/reset-password.json` |
| verification-code | registry:block | A copy-owned six-digit email verification form built with moduix React components. | `npx shadcn@latest add https://moduix.dev/r/react/verification-code.json` |
| app-header | registry:block | A copy-owned application header with navigation, notifications, and account actions. | `npx shadcn@latest add https://moduix.dev/r/react/app-header.json` |
| mobile-drawer-navigation | registry:block | A copy-owned mobile navigation shell with an accessible side drawer. | `npx shadcn@latest add https://moduix.dev/r/react/mobile-drawer-navigation.json` |
| data-table | registry:block | A copy-owned TanStack Table with search, sorting, selection, column visibility, actions, and pagination. | `npx shadcn@latest add https://moduix.dev/r/react/data-table.json` |
| sidebar-dashboard | registry:block | A copy-owned desktop dashboard shell with collapsible and resizable moduix navigation. | `npx shadcn@latest add https://moduix.dev/r/react/sidebar-dashboard.json` |
| file-upload-manager | registry:block | A copy-owned attachment manager with drag-and-drop, validation, removal, and clear actions. | `npx shadcn@latest add https://moduix.dev/r/react/file-upload-manager.json` |

## For AI agents

```text
You are adding components from @moduix-react to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/moduix-react.md) for the component list.
2. Fetch the machine-readable index: https://moduix.dev/r/react/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: moduix-react).
```