unstyled removes the built-in classes and nothing else. The roles, the names, the states, the focus trap, the keyboard, the overlay positioning and the dismissal all stay: what you give up is the look, which is the point.

One instance

Example.vue

<Button
    label="Tailwind"
    unstyled
    :pt="{ root: 'px-4 py-2 rounded bg-violet-600 text-white hover:bg-violet-700' }"
/>

Above is the unstyled button dressed with inline styles rather than utility classes, since this site does not ship Tailwind. The mechanism is the same either way.

The whole application

main.ts

createApp(App).use(Vitral, {
    unstyled: true,
    pt: {
        button: { root: 'inline-flex items-center gap-2 px-3 py-1.5 rounded-md' },
        inputtext: { root: 'border rounded-md px-3 py-2 w-full' }
    }
});

Set globally, unstyled also skips injecting every component's CSS, so the page carries none of it. A single component can still opt back in with :unstyled="false".

What a component still gives you

The ARIA pattern: roles, names, aria-expanded, aria-selected, aria-activedescendant and the relations between them.
The keyboard: type-ahead, roving focus, Home/End, Escape, Tab out of an overlay.
Overlay behaviour: positioning with flipping, the layer stack, scroll lock, focus return.
Data behaviour: filtering, sorting, paging, selection, tree expansion.

Which is to say: everything that is tedious and easy to get wrong, and none of what is opinionated.

Unstyled mode

One instance

The whole application

What a component still gives you