@moduix/vue-tailwind

@moduix/vue-tailwind

Vue components built on Ark UI, styled with Tailwind CSS v4. Compose components from flat named parts using native Vue props and events.

Quick start · Components · Styling

Install

Start from an existing application using Vue 3.5 or later in the 3.x line. Tailwind CSS v4 must already be configured in the application.

Install moduix and its matching Ark UI peer dependency:

pnpm add @moduix/vue-tailwind @ark-ui/vue

Import components from subpaths such as @moduix/vue-tailwind/accordion; there is no package-root export. Only the optional Chart integration requires an additional peer: pnpm add @tanstack/charts.

Add styles

In your global stylesheet, load the foundation before Tailwind and register the package's utilities:

@import '@moduix/vue-tailwind/style.css';
@import 'tailwindcss';

@source '../node_modules/@moduix/vue-tailwind/dist/components';

Import this stylesheet once in your application entry point. Resolve @source relative to the stylesheet; the example assumes src/styles.css. Tailwind ignores node_modules by default. Keep Tailwind Preflight enabled and do not add the moduix reset.

Use a component

<script setup lang="ts">
import {
  Accordion,
  AccordionItem,
  AccordionItemBody,
  AccordionItemContent,
  AccordionItemIndicator,
  AccordionItemTrigger,
} from '@moduix/vue-tailwind/accordion';
</script>

<template>
  <Accordion :default-value="['first']">
    <AccordionItem value="first">
      <AccordionItemTrigger>
        What is moduix?
        <AccordionItemIndicator />
      </AccordionItemTrigger>
      <AccordionItemContent>
        <AccordionItemBody>
          A component library built on accessible Ark UI primitives.
        </AccordionItemBody>
      </AccordionItemContent>
    </AccordionItem>
  </Accordion>
</template>

The family name is the root component. Each additional part is a separate family-prefixed export. The setup is working when the trigger is styled and the panel opens with keyboard and pointer input.

Customize

Pass utility classes through class on the root or a named part. Classes are merged with tailwind-merge, so p-0 can replace the default padding. Override shared CSS tokens to change colors, spacing, typography, or motion.

The optional presets are dense, soft, and contrast. See Themes for imports and activation, and Tokens for available CSS properties.

Own the source

Configure components.json and aliases with the registry setup, then add a component:

pnpm dlx shadcn@latest add @moduix-vue-tailwind/accordion

The CLI copies native Vue source, styles, and dependencies into your project. Follow Quick Start to connect the generated foundation stylesheet. The same namespace also installs blocks, for example @moduix-vue-tailwind/login-simple.

Compatibility

The package is ESM-only and ships JavaScript targeting ES2023. Use an application bundler that supports package CSS imports. See the framework guides for entry files, aliases, and SSR integration.

Links

• Documentation
• npm package
• Source repository
• Issues

License

MIT