--- title: Credit description: A dependency, credited, with its author required rather than optional. source: https://adamjurek.com/components/credit --- ## Home Credit is a card for one dependency: its own mark and name, who built it, what it does here, and a link to its home. Reach for it on a "built with" or dependencies page, wherever crediting the tools a project runs on needs to be unmissable rather than implied. ## Why it is built this way A page that lists what it is built with, in the same visual language as what it built, quietly takes credit for both unless the distinction is unmissable - so `by` is required, not optional: the type system enforces the one rule this component exists for. The card is one anchor and the docs chip is a second, sibling anchor laid over its corner, because an `` inside an `` is markup the browser will unnest. ## Install ### TanStack ```shell tanstack add https://adamjurek.com/r/tanstack/credit.json ``` ### shadcn ```shell pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/credit.json ``` ### pnpm ```shell pnpm add @sushindustries/ui @sushindustries/atoms ``` ## What you get | | | | --- | --- | | Version | 0.1.0 | | Category | content ยท Attribution | | Files | `credit.tsx` | | Dependencies | None | | Tags | surface, no-deps | > [!NOTE] No runtime dependencies > It brings nothing with it beyond the stylesheet. ## Get Started Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked. ## Use it ```tsx import { Credit } from "@sushindustries/ui"; export function Example() { return ( ); } ``` ## What you should see A card that is one big link to `href`, opening in a new tab: the project's own mark and name on the left, the author's name truncating first if the row runs out of room, and the role underneath. With `docs` set, a small "Docs" chip sits over the corner as a second, separate link. ## If nothing happens The card always renders something, even with only `name`, `by`, `href` and `role` set - `logo` and `docs` are the only optional pieces. If the author name is getting clipped when the project name is not, that is correct: the name never truncates, the author line does. ## Guides ## Composing it It is built to sit in a grid or a stacked list of other `Credit` cards - a dependencies page, an "open source used here" section - not alone. Nothing about it requires a particular parent, but nothing about it looks finished as a lone card either. ## Why `by` is required, not optional A page that lists what it is built with, styled in the same visual language as what it built, quietly takes credit for both unless the distinction is unmissable. Making `by` required rather than optional is what stops a future call site from rendering a card with no author - the type system enforces the one rule this component exists for. ## When not to use it Crediting your own work. `Credit` is for dependencies and other people's projects; a self-referential "by" line reads as a joke or a mistake, not attribution. ## API ## Props | Prop | Type | Default | Does | | --- | --- | --- | --- | | `name` | `string` | - | The project's own name, spelled the way its authors spell it. | | `by` | `string` | - | Who made it. Shown so authorship is never ambiguous. | | `href` | `string` | - | The project's own home. Opens in a new tab, since it leaves this site. | | `role` | `string` | - | What it does *here*. One line, present tense. | | `logo?` | `string` | - | The project's own mark, as an image URL. Their drawing, not a redraw - a dependency's logo is quotation, and quotations are not paraphrased. | | `docs?` | `string` | - | Where the documentation lives, when it is not the `href` itself. | ## Notes `docs` is the only prop that changes the markup shape: without it, the card is a single anchor. With it, a second anchor is laid over the corner as a sibling rather than nested inside the first - an `` inside an `` is markup the parser unnests, so the two links share a `credit-slot` wrapper instead of one containing the other. `logo` takes a URL, not a component: it always renders as a plain `` with an empty `alt`, since the name text beside it is already the accessible label for what the image shows. ## Examples Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props. Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands. ## In a page ```tsx import { Credit } from "@sushindustries/ui"; const DEPENDENCIES = [ { name: "TanStack Start", by: "Tanner Linsley and contributors", href: "https://tanstack.com/start", role: "The framework this site runs on", }, { name: "Vite", by: "Evan You and contributors", href: "https://vitejs.dev", role: "The build behind it", }, ]; export function BuiltWith() { return (
{DEPENDENCIES.map((dep) => ( ))}
); } ``` ## What this example is not Not an exhaustive dependency list. A real "built with" page names every credited package this way, one card each - spreading an object is a convenience for the list, not a hint that the props are optional.