FilesPanel

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

GitHub

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

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

FilesViewport

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

FilesList

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"div">—Vertical collection layout for file rows.

Row structure#

FileRow

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

FileRowOpen

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

File content#

FileThumbnail

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

FileImage

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

FileContent

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">—Flexible content column containing the name and metadata.

FileName

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">—Truncated file name.

FileMeta

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">—Wrapping metadata row for size, timestamp, or other caller-owned facts.

FileMetaItem

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">—Inline metadata item with optional icon.

File actions#

FileActions

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

FileAction

PropTypeDefaultDescription
variantButtonProps['variant']"outline" (Brutal) / "ghost" (Elegant)Optional Button variant override. The theme-aware default matches panel chrome.
sizeButtonProps['size']"icon-sm"Button size. The default is optimized for trailing row actions.
...propsButtonProps—All other Button props, including disabled, aria-label, title, render substitution, and click handlers.