NovoChatdesde v0.2.0

Attachment

Anexo de arquivo para interfaces de chat e upload.

Quando usar

Use em fluxos de chat, upload ou revisão de arquivos anexados. Combine com estados como uploading, error e done.

Playground

Ajuste props ou edite o código em tempo real (componentes compatíveis).

Controles interativos disponíveis em breve para este componente. Use os exemplos abaixo como referência.

Editor Sandpack disponível para: button, input, textarea, switch, skeleton, separator, label e spinner. Este componente usa apenas o preview interativo acima.

Exemplos

Variações comuns de uso.

Anexo concluído

PDF

briefing.pdf240 KB

import {
  Attachment,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

export function AttachmentDone() {
  return (
    <Attachment state="done">
      <AttachmentMedia variant="icon">PDF</AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>briefing.pdf</AttachmentTitle>
        <AttachmentDescription>240 KB</AttachmentDescription>
      </AttachmentContent>
    </Attachment>
  )
}

Enviando

enviando.pdfEnviando...

<Attachment state="uploading">
  ...
</Attachment>

API

Props principais documentadas para o time.

Prop	Tipo	Padrão	Descrição
state	"idle" \| "uploading" \| "processing" \| "error" \| "done"	done	Estado do anexo.
size	"default" \| "sm" \| "xs"	default	Densidade do componente.
orientation	"horizontal" \| "vertical"	horizontal	Layout do anexo.

Instalação

pnpm dlx shadcn@latest add http://localhost:3000/r/attachment.json

pnpm dlx shadcn@latest add @youxgroup/attachment

Dependências

npm: cn

Registry: @youxgroup/button

Relacionados

button