unstyled remove as classes embutidas e mais nada. Os roles, os nomes, os estados, o focus trap, o teclado, o posicionamento dos overlays e o fechamento continuam todos lá: o que se perde é a aparência, e é justamente essa a ideia.

Uma instância

Example.vue

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

Acima está o botão sem estilo vestido com estilos inline em vez de classes utilitárias, já que este site não traz Tailwind. O mecanismo é o mesmo nos dois casos.

A aplicação inteira

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' }
    }
});

Definido globalmente, unstyled também deixa de injetar o CSS de cada componente, então a página não carrega nada dele. Um componente isolado ainda pode voltar atrás com :unstyled="false".

O que um componente ainda oferece

O padrão ARIA: roles, nomes, aria-expanded, aria-selected, aria-activedescendant e as relações entre eles.
O teclado: type-ahead, roving focus, Home/End, Escape, Tab para sair de um overlay.
O comportamento dos overlays: posicionamento com inversão, a pilha de camadas, o bloqueio de rolagem, a devolução do foco.
O comportamento dos dados: filtro, ordenação, paginação, seleção, expansão de árvores.

Ou seja: tudo o que é tedioso e fácil de errar, e nada do que é questão de gosto.

Modo sem estilo

Uma instância

A aplicação inteira

O que um componente ainda oferece