PatternAvailable

Attachment

A file-like content row with metadata and explicit actions.

Component guideDocumentation · Markdown

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/attachment.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import Link from 'next/link';

import {
  Attachment,
  AttachmentMedia,
  AttachmentContent,
  AttachmentTitle,
  AttachmentDescription,
  AttachmentActions,
} from '@/components/ui/attachment';
import { Button } from '@/components/ui/button';
import { FileTextIcon as FileText } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <Attachment className="w-full max-w-md">
      <AttachmentMedia>
        <FileText weight="bold" aria-hidden="true" />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>Component guide</AttachmentTitle>
        <AttachmentDescription>Documentation · Markdown</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <Button
          variant="outline"
          size="sm"
          nativeButton={false}
          render={<Link href="/en/docs/components/card" />}
        >
          Open
        </Button>
      </AttachmentActions>
    </Attachment>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

A surface or content, not a control by default. No artificial hover, pressed or focus state.
Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
className	string	?	Extends the root visual styles without changing its semantics.
children	ReactNode	?	Compose the exported subcomponents as shown in the runnable example.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name actions and describe the file. This component does not upload or download files automatically.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.