FilesPanel

Composable panel structure for channel files, thumbnails, metadata, and file actions.

Preview#

Anatomy#

import {
  FileAction,
  FileActions,
  FileContent,
  FileImage,
  FileMeta,
  FileMetaItem,
  FileName,
  FilePreview,
  FilePreviewBadge,
  FilePreviewMedia,
  FileRow,
  FileRowOpen,
  FilesList,
  FilesPanel,
  FilesViewport,
  FileThumbnail,
} from "raft-ui";

<FilesPanel aria-label="Files panel">
  <FilesViewport>
    <FilesList>
      <FileRow>
        <FileRowOpen>
          <FileThumbnail>
            <FilePreview>
              <FilePreviewMedia>
                <FileImage src="/file.png" alt="" />
              </FilePreviewMedia>
              <FilePreviewBadge />
            </FilePreview>
          </FileThumbnail>
          <FileContent>
            <FileName />
            <FileMeta>
              <FileMetaItem />
            </FileMeta>
          </FileContent>
        </FileRowOpen>
        <FileActions>
          <FileAction />
        </FileActions>
      </FileRow>
    </FilesList>
  </FilesViewport>
</FilesPanel>

Usage#

File previews#

Loading, error, and empty#

Loading

Loading files…

Error

Empty

No files yet
Attach files in Chat, or drag files into the message composer. They will appear here after the message is sent.

Advanced: actions and pagination#

The package exposes structure and native event surfaces. The consumer decides how to preview, download, jump to the original message, fetch the next cursor, and render loading or error states. This advanced example keeps those actions observable without introducing product stores or routing into raft-ui.

Ready

API#WIP

Panel structure#

FilesPanel

...props
useRender.ComponentProps<"section">
Files tab panel root. It owns the surface; fetching, routing, and file policy remain in the consumer.

FilesViewport

...props
useRender.ComponentProps<"div">
Scrollable panel viewport. Attach near-end or other pagination behavior through native scroll props.

FilesList

...props
useRender.ComponentProps<"div">
Vertical collection layout for file rows.

Row structure#

FileRow

...props
useRender.ComponentProps<"div">
Single file row. Keep FileRowOpen and FileActions as siblings so action buttons are not nested inside the row button.

FileRowOpen

...props
useRender.ComponentProps<"button">
Primary file affordance. Defaults to type="button" and accepts native button props, including disabled.

File content#

FileThumbnail

...props
useRender.ComponentProps<"span">
Thumbnail slot for an image or composed FilePreview fallback. FilePreview children automatically use the compact treatment.

FileImage

fitdefault: "cover"
"contain" | "cover"
Controls object-fit for wide/tall artwork versus ordinary cropped thumbnails.
...props
useRender.ComponentProps<"img">
Native image props. Provide alt text according to whether the thumbnail is content.

FileContent

...props
useRender.ComponentProps<"span">
Flexible content column containing the name and metadata.

FileName

...props
useRender.ComponentProps<"span">
Truncated file name.

FileMeta

...props
useRender.ComponentProps<"span">
Wrapping metadata row for size, timestamp, or other caller-owned facts.

FileMetaItem

...props
useRender.ComponentProps<"span">
Inline metadata item with optional icon.

File actions#

FileActions

...props
useRender.ComponentProps<"span">
Trailing action cluster. Render it beside FileRowOpen, not inside it, to avoid nested buttons.

FileAction

variantdefault: "ghost"
ButtonProps['variant']
Optional Button variant override. The default matches panel chrome.
sizedefault: "icon-sm"
ButtonProps['size']
Button size. The default is optimized for trailing row actions.
...props
ButtonProps
All other Button props, including disabled, aria-label, title, render substitution, and click handlers.