# Subject chip

> A compact badge with a subject's type and title that links to its page.

- Block: [subjects](https://bettersupabase.com/blocks/subjects.md)
- Kind: component
- Hook: `useSubject` from `better-supabase/blocks/subjects/react`
- Page: https://bettersupabase.com/recipes/subject-chip

## Install the block

```bash
npx better-supabase add subjects
```

## Web (Next.js)

Add the shadcn components:

```bash
npx shadcn add skeleton
```

From `apps/examples/nextjs/src/features/subjects/components/subject-chip.tsx` (https://github.com/ScaleDockHQ/better-supabase/blob/main/apps/examples/nextjs/src/features/subjects/components/subject-chip.tsx):

```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>
  );
}
```

## Prompt

Paste this into a coding agent to build the recipe in your app.

### Web

```text
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
```