Subject chip

A compact badge with a subject's type and title that links to its page. It calls useSubject from better-supabase/blocks/subjects/react.

The subjects block

Build it with AI

Paste this into your coding agent. It builds the web version.

Build "Subject chip" in a React web app that uses shadcn/ui components. A compact badge with a subject's type and title that links to its page.

It uses the better-supabase `subjects` block (Subjects). It calls the hook `useSubject` from `better-supabase/blocks/subjects/react`.

Steps:

1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add subjects` and apply the migration.
2. Add the shadcn components the recipe uses: `npx shadcn add skeleton`.
3. The recipe needs no glue: the hook calls the block from the client.
4. Write the component. Call `useSubject` from `better-supabase/blocks/subjects/react`, starting from the recipe's snippet (`apps/examples/nextjs/src/features/subjects/components/subject-chip.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is.
5. Check the result against the recipe and the block's docs: it typechecks, it calls the same hook, and it handles the loading and empty states the snippet handles.

Read the full code first:

- Recipe: https://bettersupabase.com/recipes/subject-chip.md
- Block docs: https://bettersupabase.com/docs/blocks/subjects

No screenshot yet. Run the Next.js example (pnpm dev:example) to see it.

1
Add the components
terminal
```
npx shadcn add skeleton
```
Install the glue
Install the block with npx better-supabase add subjects. The glue items are copied into your app, so edit them as you need.
None: the hook calls the block from the client.

Write the component

React and shadcn

View in the example

subject-chip.tsx

"use client";

import type { SubjectRef } from "better-supabase/blocks/subjects";

import { useSubject } from "better-supabase/blocks/subjects/react";
import { useExtracted } from "next-intl";

import { Badge } from "@/components/reui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/navigation";

/**
 * A compact badge for a subject: its type and title, linking to its page. Rows
 * that each render a chip share one `subject_titles` call.
 */
export function SubjectChip({ subject }: { subject: SubjectRef }) {
  const t = useExtracted("subjects");
  const { subject: resolved, error } = useSubject(subject);

  if (resolved === undefined && !error) {
    return <Skeleton className="h-5 w-24" />;
  }

  const label = resolved?.title ?? t("Unavailable");

  const content = (
    <>
      <span className="text-muted-foreground">{subject.type}</span>
      <span className="truncate">{label}</span>
    </>
  );

  return resolved?.url === undefined ? (
    <Badge variant="outline">{content}</Badge>
  ) : (
    <Badge
      variant="outline"
      className="transition-colors hover:bg-accent"
      render={<Link href={resolved.url} />}
    >
      {content}
    </Badge>
  );
}

Build "Subject chip" in a React web app that uses shadcn/ui components. A compact badge with a subject's type and title that links to its page. It uses the better-supabase `subjects` block (Subjects). It calls the hook `useSubject` from `better-supabase/blocks/subjects/react`. Steps: 1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add subjects` and apply the migration. 2. Add the shadcn components the recipe uses: `npx shadcn add skeleton`. 3. The recipe needs no glue: the hook calls the block from the client. 4. Write the component. Call `useSubject` from `better-supabase/blocks/subjects/react`, starting from the recipe's snippet (`apps/examples/nextjs/src/features/subjects/components/subject-chip.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is. 5. Check the result against the recipe and the block's docs: it typechecks, it calls the same hook, and it handles the loading and empty states the snippet handles. Read the full code first: - Recipe: https://bettersupabase.com/recipes/subject-chip.md - Block docs: https://bettersupabase.com/docs/blocks/subjects

Write the component

React and shadcn

View in the example

subject-chip.tsx

"use client";

import type { SubjectRef } from "better-supabase/blocks/subjects";

import { useSubject } from "better-supabase/blocks/subjects/react";
import { useExtracted } from "next-intl";

import { Badge } from "@/components/reui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/navigation";

/**
 * A compact badge for a subject: its type and title, linking to its page. Rows
 * that each render a chip share one `subject_titles` call.
 */
export function SubjectChip({ subject }: { subject: SubjectRef }) {
  const t = useExtracted("subjects");
  const { subject: resolved, error } = useSubject(subject);

  if (resolved === undefined && !error) {
    return <Skeleton className="h-5 w-24" />;
  }

  const label = resolved?.title ?? t("Unavailable");

  const content = (
    <>
      <span className="text-muted-foreground">{subject.type}</span>
      <span className="truncate">{label}</span>
    </>
  );

  return resolved?.url === undefined ? (
    <Badge variant="outline">{content}</Badge>
  ) : (
    <Badge
      variant="outline"
      className="transition-colors hover:bg-accent"
      render={<Link href={resolved.url} />}
    >
      {content}
    </Badge>
  );
}

Add the components

Install the glue

Write the component

React and shadcn

Add the components

Install the glue

Write the component

React and shadcn