A biblioteca shadcn/ui se destaca como uma das mais populares atualmente. Com componentes lindamente projetados que você pode copiar e colar diretamente em seus aplicativos, ela tem se tornado a escolha preferida em muitos projetos.

Pessoalmente, já utilizei essa biblioteca em diversos trabalhos, incluindo o meu portfólio—o próprio lugar de onde você está lendo isso agora. A variedade e a qualidade dos componentes são tão atraentes que é tentador utilizá-los em cada oportunidade. Quanto maior o projeto, mais shadcn/ui.

No entanto, em alguns projetos onde abusei do uso de shadcn/ui, acabei enfrentando uma situação caótica na minha tela. Sem que eu percebesse, um verdadeiro "shadcn-calipse" tomou conta do meu ambiente de trabalho. Embora não interferisse diretamente no funcionamento do projeto, era desconfortável ver minha tela repleta de importações.

 
    import { Badge } from "@/components/ui/badge";
    import { Button } from "@/components/ui/button";
    import { Input } from "@/components/ui/input";
    import {
        Table,
        TableBody,
        TableCell,
        TableHead,
        TableHeader,
        TableRow,
    } from "@/components/ui/table";
    import {
        DialogTrigger,
        DialogTitle,
        DialogHeader,
        DialogContent,
        Dialog,
    } from "@/components/ui/dialog";
    ...
 

Imagine só: cerca de 100 linhas de importações antes mesmo de chegar ao código principal.

Centralizando as importações

Para resolver essa desordem, optei por uma solução simples: criar um novo arquivo. Não se trata de nada complicado, mas sim de um pequeno ajuste que faz uma grande diferença. Começo criando um arquivo index.tsx na pasta /components/ui e movo todas as minhas importações para lá.

Depois, crio um objeto com um nome sugestivo — que tal shadcn? Em seguida, adiciono todos os componentes a esse objeto.

 
    import { Badge } from "@/components/ui/badge";
    import { Button } from "@/components/ui/button";
    import { Input } from "@/components/ui/input";
 
    export const shadcn = {
        Badge,
        Button,
        Input,
        ...
    };
 

Assim, ao invés de lidar com inúmeras linhas de importações em vários arquivos, importo apenas o objeto shadcn e uso os componentes como propriedades desse objeto:

 
    import { shadcn } from "@/components/ui";
 
    ...
 
    <shadcn.Button>
        Click
    </shadcn.Button>
 
    ...
 

Embora essa abordagem não elimine completamente o "apocalipse das importações", ela o centraliza em um único lugar, tornando o código mais limpo e fácil de gerenciar.