Como acelerar (e muito) a criação do UI com shadcn/ui

#Next.js
#React

Primeiramente, gostaria de dizer que o shadcn NÃO é uma biblioteca de componentes, e é justamente isso que o torna tão atrativo. O shadcn é uma coleção de componentes reutilizáveis. Após a instalação do componente via terminal, ele fica disponível dentro da pasta ‘ui’ em ‘components’ e pode ser editado conforme suas necessidades.

Portanto, você não instala o shadcn como uma dependência. Você seleciona os componentes desejados, copia e cola o código no seu projeto, personalizando-o conforme necessário. O código é totalmente seu.

Popularidade

Apesar de ter sido lançado recentemente, devido à sua funcionalidade, tornou-se uma das soluções de UI mais famosas nos projetos de desenvolvimento web com React. Conheci o shadcn através de um amigo durante uma conversa sobre as melhores tecnologias para utilizar com React e logo comecei a assistir vídeos de canais populares, como o da Rocketseat e da Vercel, que desenvolviam projetos com o shadcn.

Funcionamento

O Shadcn UI é construído sobre o Tailwind CSS e o Radix UI e atualmente oferece suporte ao Next.js, Gatsby, Remix, Astro, Laravel e Vite. No entanto, é possível integrá-lo manualmente com outras tecnologias.

Recursos da interface do usuário Shadcn

Nosso parceiro shadcn fornece diversos recursos que podem ser combinados para uma UX aprimorada. Confira alguns dos recursos que você pode utilizar facilmente com o shadcn.

Alguns componentes

No momento, o shadcn possui 46 componentes, entre eles:

Button:

Carousel:

Table:

Temas e editor de temas

A interface do shadcn oferece uma variedade de temas prontos para você usar em seus aplicativos. Você pode adicionar esses temas manualmente ao seu código, mas também pode usar o editor de temas para fazer isso de forma mais fácil.

Com o editor de temas, você pode ajustar cores, bordas e escolher entre dois estilos diferentes: default e new-york. Cada estilo tem suas próprias características, como tamanhos de campos e tipos de ícones.

Você também pode criar seus próprios temas usando o editor de temas. Depois de personalizar, o editor gera um código que você pode simplesmente copiar e colar em seu aplicativo.

Modo escuro

O shadcn oferece suporte ao modo escuro para aplicativos Next.js e Vite. Para os aplicativos Next.js, utilizando next-themes para possibilitar a alternância entre os modos claro e escuro. Quando um usuário faz essa alteração, o aplicativo automaticamente ajusta os tokens de tema para refletir a escolha do usuário, seja no modo claro ou escuro.

Por que utilizar o shadcn?

Facilidade de uso: Seus componentes são acessíveis através de métodos de copiar e colar ou instalação via CLI. Em comparação com outras bibliotecas de componentes, como Material UI e Chakra UI, o Shadcn UI oferece uma experiência igualmente intuitiva e descomplicada.

Acessibilidade: Os componentes oferecem suporte a leitores de tela, navegação por teclado e outros recursos de acessibilidade.

Controle e extensibilidade: O shadcn proporciona acesso direto ao código-fonte de cada componente, permitindo ajustes personalizados para atender a casos de uso e necessidades específicas dos aplicativos.

Como utilizar o shadcn

Na documentação do shadcn está presente todos os códigos e instruções que você precisa para utilizar o shadcn com vários frameworks, vou mostar aqui como utilizar o shadcn com Next.js e com o gerenciador de pacotes npm.

Criar projeto

Comece criando um novo projeto Next.js usando create-next-app:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Execute a CLI

Execute o shadcn-uicomando init para configurar seu projeto:

npx shadcn-ui@latest init

Configurar componentes.json

Serão feitas algumas perguntas para configurar components.json:

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

Fontes

Eu uso Inter como fonte padrão. O Inter não é obrigatório. Você pode substituí-lo por qualquer outra fonte.

Veja como configuro o Inter para Next.js:

Importe a fonte no layout raiz:

import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"

import { cn } from "../@/lib/utils"

const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
})

export default function RootLayout({ children }: RootLayoutProps) {
return (
  <html lang="en" suppressHydrationWarning>
    <head />
    <body
      className={cn(
        "min-h-screen bg-background font-sans antialiased",
        fontSans.variable
      )}
    >
      ...
    </body>
  </html>
)
}

2. Configurar theme.extend.fontFamilyemtailwind.config.js

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
theme: {
  extend: {
    fontFamily: {
      sans: ["var(--font-sans)", ...fontFamily.sans],
    },
  },
},
}

Estrutura do aplicativo

Veja a estrutura dos aplicativos Next.js. Você pode usar isso como referência:

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Coloco os componentes da UI na components/uipasta.
O restante dos componentes, como <PageHeader />e, <MainNav />são colocados na componentspasta.
A libpasta contém todas as funções do utilitário. Eu tenho um utils.tsonde defino o cnajudante.
A stylespasta contém o CSS global.

Pronto

Agora você pode começar a adicionar componentes ao seu projeto.

npx shadcn-ui@latest add button

O comando acima irá adicionar o Buttoncomponente ao seu projeto. Você pode importá-lo assim:

import { Button } from "@/components/ui/button"

export default function Home() {
return (
  <div>
    <Button>Click me</Button>
  </div>
)
}

Conclusão

Em resumo, o Shadcn UI é uma opção promissora para o desenvolvimento de interfaces de usuário, oferecendo um equilíbrio entre facilidade de uso, controle refinado e suporte a acessibilidade. Com sua rápida adoção por grandes empresas como a Vercel, podemos esperar vê-lo ganhar ainda mais destaque no futuro.

Referências

https://ui.shadcn.com/

https://blog.logrocket.com/shadcn-ui-reusable-ui-component-collection/