Capabilities Badges

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 { useFiles } from "files-sdk/react";import { CapabilitiesBadges } from "@/components/files-sdk/capabilities-badges";const Example = () => {  const files = useFiles({ endpoint: "/api/files" });  return <CapabilitiesBadges files={files} />;};export default Example;

Installation

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

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

bunx --bun 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