moduix

Accessible UI components for React, Solid, Vue, and Svelte. 80+ components and ready-made blocks built on Ark UI, with the same API in every framework. Style them with CSS Modules or Tailwind CSS v4, and install from npm or copy the source into your app with the shadcn CLI.

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
Svelte	@moduix/svelte	@moduix/svelte-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, Vue, and Svelte 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 install methods. 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.

Start a new app

Use a standalone Vite starter with TypeScript and CSS Modules:

Framework	Starter	Online playground
React	react-vite	Open in StackBlitz
Solid	solid-vite	Open in StackBlitz
Vue	vue-vite	Open in StackBlitz
Svelte	svelte-vite	Open in StackBlitz

pnpm dlx giget@latest gh:Blinks44/moduix/starters/react-vite my-app
cd my-app
pnpm install --frozen-lockfile
pnpm dev

Replace react-vite with solid-vite, vue-vite, or svelte-vite for another framework.

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. Add the moduix namespaces to components.json (the Quick start has the full file for each styling track):

{
  "registries": {
    "@moduix-react": "https://moduix.dev/r/react/{name}.json",
    "@moduix-react-tailwind": "https://moduix.dev/r/react-tailwind/{name}.json"
  }
}

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, Vue, and Svelte) 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.

Versioning

moduix follows semantic versioning. The 3.x API is stable: breaking changes ship only in major versions, each with a migration guide, and deprecated APIs stay available until the next major. See Versioning and stability.

Comparing options? See moduix vs shadcn/ui, Park UI, and Chakra UI.

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 repository layout, local setup, and checks, 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.