moduix

Components for React, Solid, and Vue built on Ark UI, styled with CSS Modules or Tailwind CSS. Ark UI handles keyboard interaction, focus, and accessibility semantics. Svelte support is planned.

Install a published package to receive updates through your package manager, or copy component source into your application with the shadcn registry to edit it directly.

Documentation · Quick start · Components · Blocks · Packages

Current packages

Runtime	CSS Modules	Tailwind
React	@moduix/react	@moduix/react-tailwind
Solid	@moduix/solid	@moduix/solid-tailwind
Vue	@moduix/vue	@moduix/vue-tailwind

Why moduix

• Ark-backed behavior. Dialogs, menus, inputs, and other complex interactions keep Ark UI's keyboard support, state management, form behavior, and accessibility semantics.
• The same component names across frameworks. React, Solid, and Vue use flat exports such as Dialog, DialogTrigger, and DialogContent, with framework-native props and events.
• Two styling paths. Choose CSS Modules for ordinary, locally scoped component styles, or Tailwind CSS v4 for utility-first composition and overrides. Neither path adds a styling runtime.
• Two ownership models. Keep dependencies package-managed or copy component source into your application through the shadcn registry.

Get started

The example below uses React with CSS Modules. Quick start covers every shipped framework, both styling tracks, and package or registry installation.

Use the published package

Install moduix and its Ark UI peer dependency:

pnpm add @moduix/react @ark-ui/react

Import the reset and foundation once in your application entry point. If your application already provides an equivalent reset, omit reset.css:

import '@moduix/react/reset.css';
import '@moduix/react/style.css';

Import a component from its subpath:

import { Button } from '@moduix/react/button';

export function Example() {
  return <Button>Continue</Button>;
}

There is no package-root export. Only the optional Chart integration requires @tanstack/charts. The package README shows how to compose a component from named parts.

Own the source with the registry

Use the registry when a component should live in your repository and evolve with your product. Set up components.json with the Quick start, then add only the components you need:

pnpm dlx shadcn@latest add @moduix-react/button @moduix-react/dialog

The generated source includes the component, its CSS Module, and any required supporting files. The registry preserves the same component contracts and design tokens as the published package. Your components.json aliases determine the destination paths.

The registry also installs blocks, including sign-in forms, a sidebar dashboard, and a data table. Each block includes its source, a shared layout CSS Module, and the required UI components. After the same registry setup, install a block with one command:

pnpm dlx shadcn@latest add @moduix-react/login-simple

Choose the matching framework and styling namespace, such as @moduix-vue-tailwind/login-simple. Tailwind blocks use Tailwind UI components and the same layout CSS Module.

Styling and theming

Pass className (React) or class (Solid and Vue) to a root or named part. CSS Modules packages support ordinary CSS and component variables; Tailwind packages merge utility overrides with tailwind-merge. Both tracks share the same design tokens and optional presets: dense, soft, and contrast.

See Styling, Themes, and Tokens for customization.

Repository

Path	Purpose
packages/<framework>	Published framework-native CSS Modules adapters.
packages/<framework>-tailwind	Published framework-native Tailwind adapters.
packages/foundation	Shared framework-neutral tokens, resets, presets, and animations.
playgrounds/<framework>*	Adapter playgrounds used for parity checks.
website	Documentation site, runnable examples, and generated registry artifacts.

Use Node.js 24 or later and the pnpm version pinned in package.json. Install dependencies and run the documentation site locally:

pnpm install
pnpm run dev:docs

Before opening a pull request, run the repository checks:

pnpm run fmt:fix
pnpm run lint:check
pnpm run tsc:check

Run pnpm run build:registry after changing files shipped by the registry.

Contributing

Contributions are welcome, especially focused component improvements, accessibility fixes, bug reports, and documentation corrections. Keep public component behavior, local component notes, documentation, and registry output synchronized when a public contract changes.

See CONTRIBUTING.md for the full workflow, and AGENTS.md for repository conventions. Security issues go through SECURITY.md.

Acknowledgements

moduix is possible because of the work and ideas of these projects:

• Ark UI for interaction primitives.
• Chakra UI for component composition and styling patterns.
• shadcn/ui for source distribution through registries.
• Lucide for the open-source icon set used throughout the component library.
• UnoCSS and Tailwind CSS for the foundations adapted by the optional reset.
• Rstack for its Rust-based ecosystem: Rspress for documentation, Rslib for library builds, and Rstest for tests.
• VoidZero for the JavaScript tooling used throughout the workspace.

License

MIT

Third-party licenses and attribution are listed in THIRD_PARTY_NOTICES.md.