@doitrix/ui

@doitrix/ui

Professional Vue 3 components that you install into your own code. The CLI copies the source into your project, so you own it: read it, change it, keep what you use. Behaviour comes from @doitrix/headless, every value from @doitrix/tokens.

Start

bunx @doitrix/ui init              # doitrix.json, shared helpers, the icon adapter
bunx @doitrix/ui add button card data-table

Then, in your main stylesheet:

@import 'tailwindcss';
@import '@doitrix/tokens/tailwind.css';

add copies each component with everything it imports, and prints the exact packages to install, pinned to the versions this registry was built against.

Nuxt

init detects Nuxt and installs the Nuxt Icon adapter under app/ with ~ aliases. Add to nuxt.config.ts:

modules: ['@doitrix/icons/nuxt', '@nuxt/icon'],
components: [{ path: '~/components/ui', pathPrefix: false, extensions: ['.vue'] }],

extensions: ['.vue'] matters: without it Nuxt registers each component's index.ts as a component too, and icon/index.ts would shadow Nuxt Icon's <Icon>.

Components

Run bunx @doitrix/ui list for the full catalogue. By area:

• Primitives — Stack, Text, Container, VisuallyHidden
• Form — Button, Field (label/description/error wiring), Input, Textarea, Checkbox, Switch, RadioGroup, Select, Label
• Display — Card (Header, Title, Description, Action, Content, Footer, Section, Grid, Field, Divider), Badge, Alert, Avatar, Separator, Skeleton, Spinner, Empty
• Overlay — Dialog, AlertDialog, Sheet, Popover, Tooltip, DropdownMenu
• Navigation — Tabs, Pagination
• Data — Table parts, DataTable, TableToolbar, FacetFilter

Every component is named Doitrix* and composed from parts:

<DoitrixCard>
  <DoitrixCardHeader>
    <DoitrixCardTitle>Loan book</DoitrixCardTitle>
    <DoitrixCardDescription>Every loan across your branches.</DoitrixCardDescription>
    <DoitrixCardAction><DoitrixButton size="sm">Export</DoitrixButton></DoitrixCardAction>
  </DoitrixCardHeader>
  <DoitrixCardContent>…</DoitrixCardContent>
</DoitrixCard>

Icons

DoitrixIcon renders any Iconify icon. A bare name uses the Doitrix set (<DoitrixIcon name="check" />); a prefix uses another (name="lucide:bell"). In Nuxt it renders through Nuxt Icon; in Vue through @iconify/vue.

Staying current

Each installed file carries a stamp — the item, the registry version and a hash of what was written.

bunx @doitrix/ui diff      # current · outdated · modified · unmanaged
bunx @doitrix/ui update    # refreshes untouched files, keeps the ones you edited
bunx @doitrix/ui update --force

Removing a component

bunx @doitrix/ui remove slider

It deletes only what you name, never a component another installed one still imports, and never a file you have edited; --force removes it regardless. Shared lib/ helpers and npm packages are left in place.

Rules the components keep

• Tokens only — no hex, no Tailwind palette colours, no numeric text sizes, no dark: overrides. Enforced by test, and every class is compiled against the real theme so a typo cannot ship.
• Variants are closed records; one variant and one size rather than booleans.
• asChild wherever a component might need to be a link.
• Your class wins conflicts with the component's.