Capabilities Badges

Surfaces what the configured storage adapter can do as a row of badges — driven by useFiles.

Reads capabilities() once and renders each adapter feature as a badge: a check when supported, a cross when not. Handy for showing users what their backend can do, and as a building block for gating actions — hide a “share link” button when Signed URLs is unsupported, skip range planning when Range reads is off.

"use client";

import { demoFiles } from "@/lib/demo-files";
import { CapabilitiesBadges } from "@/registry/files-sdk/capabilities-badges/capabilities-badges";

const Example = () => {
  const files = demoFiles;

  return <CapabilitiesBadges files={files} />;
};

export default Example;

Installation

npx shadcn@latest add https://files-sdk.dev/r/capabilities-badges.json

Usage

import { useFiles } from "files-sdk/react";

import { CapabilitiesBadges } from "@/components/files-sdk/capabilities-badges";

export function Backend() {
  const files = useFiles({ endpoint: "/api/files" });

  return <CapabilitiesBadges files={files} supportedOnly />;
}

The same capabilities() snapshot the gateway exposes drives this — so what you see is exactly what url(), download({ range }), list({ delimiter }) and friends will actually do at runtime. Pass supportedOnly to drop the unsupported rows entirely.

Props