A combinação do poderoso Quasar Framework com a estética elegante do Shadcn UI tem ganhado popularidade entre desenvolvedores que buscam criar interfaces modernas e funcionais. Neste tutorial, vamos explorar como personalizar o Quasar Framework para ter a aparência do Shadcn, com foco em aplicações de blog.
Introdução
O Quasar Framework é conhecido por sua versatilidade e conjunto completo de componentes Vue.js, enquanto o Shadcn UI oferece um visual minimalista e moderno que tem se tornado referência em design de interfaces. Unir essas duas tecnologias permite criar aplicações com a robustez do Quasar e a estética refinada do Shadcn.
Pré-requisitos
- Conhecimento básico de Vue.js e Quasar Framework
- Node.js e npm/yarn instalados
- Familiaridade com CSS e sistema de design
Configuração Inicial
Comece clonando o repositório base que servirá como referência:
git clone https://github.com/patrickmonteiro/quasar-dashboard-shadcn.git
cd quasar-dashboard-shadcn
npm install
Este repositório, criado por Patrick Monteiro, já contém uma implementação de dashboard usando Quasar com visual inspirado no Shadcn.
Principais Características
1. Sistema de Cores
O Shadcn utiliza um esquema de cores neutras com acentos sutis. Para replicar isso no Quasar:
- Configure variáveis CSS personalizadas no arquivo
src/css/quasar.variables.scss - Implemente o modo escuro/claro com transições suaves
2. Componentes Personalizados
Para obter o visual do Shadcn, você precisará personalizar vários componentes do Quasar:
Botões
Os botões do Shadcn possuem cantos ligeiramente arredondados e efeitos de hover sutis:
.q-btn {
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.15s ease;
}
.q-btn--flat:hover {
background-color: rgba(var(--q-primary), 0.08);
}
Cards
As cards do Shadcn têm bordas suaves e sombras mínimas:
.q-card {
border-radius: 0.5rem;
border: 1px solid var(--border-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
Formulários
Para campos de formulário com aparência Shadcn:
.q-field__control {
border: 1px solid var(--border-color);
border-radius: 0.375rem;
height: 2.5rem;
}
.q-field--focused .q-field__control {
border-color: var(--q-primary);
}
Layout do Blog
Para adaptar este design a um blog, considere:
Estrutura de Página
