shadcn funciona de maneira simples em NextJS.

Seguindo a documentação oficial, após iniciar um projeto em NextJS, rode o seguinte comando na raiz do projeto:

npm shadcn-ui@latest init

Após o comando de inicialização do shadcn ser executado, serão feitas algumas perguntas sobre estilização:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate / Gray / Zinc / Neutral / Stone
Do you want to use CSS variables for colors? › no / yes

Geralmente, escolhemos as opções Default, Slate e yes porém podem variar de projeto para projeto.

Existem algumas configurações que podemos fazer em nosso projeto.

Na documentação oficial, a partir do passo 4, o autor sugere algumas modificações em arquivos do projeto para configurar shadcn com fontes, por exemplo.

Com shadcn configurado, podemos adicionar nossos componentes utilizando o comando

npm shadcn-ui@latest add <component>

Considerando que o projeto utiliza a pasta /src/app, o comando acima cria a pasta src/components/ui, onde shadcn colocará os componentes adicionados. Lembrando que o que é adicionado é um arquivo .tsx, do qual temos total controle para modificar como quisermos.

Então, como exemplo, se rodarmos npx shadcn-ui@latest add button, shadcn criará, nesse caso, a pasta /src/components/ui e adicionará o arquivo button.tsx com o código necessário para esse componente. Com isso, basta importá-lo em alguma página para utilizá-lo:

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

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