Credit

A React component in Beamline's Content & display category, in the free sample.

"Designed with Beamline" for a site's footer: the Beamline mark and a quiet line, or a small badge. With your referral code, a team's first purchase through it earns you 30% as Beamline credit.

Use it for

• The footer of a public site, landing page or docs built with Beamline, when the person agrees to credit it.
• A "made with" strip or an about page.

Not for

• Adding it without asking the person: the agent asks once per project and records the answer.
• Inside a logged-in app's working screens: it belongs on public pages.
• Your own studio's credit or other links (an ordinary link).

Anatomy

• link (credit)
• mark (credit-mark, inline SVG)
• label (credit-label: wording + Beamline)

Variants

• variant: text, badge
• size: sm, md
• wording: designed, built

States

• rest
• hover
• focus-visible
• with code (rel=sponsored)
• without code (rel=nofollow)

Keyboard

• Tab reaches the link; Enter opens beamline.io (a new tab by default).

Motion

Hover or keyboard focus runs one pulse of light up the mark's slash (1.1 s) and brightens the name; nothing moves at rest; reduced motion keeps only the colour change.

Props

Import

import { Credit } from "@/components/credit/credit";

Get it

Credit is part of Beamline: 191 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Credit is in the free sample, which costs nothing. Get Beamline · Connect your agent

More in Content & display

• Image compare: Two images in one frame with a divider: drag anywhere, or arrow keys on the handle; horizontal or vertical, with captions.
• Video player: A video player on the native <video> element: title bar with an external link and close, centre play with ±10 s, scrub, time, volume, speed, captions…
• Lightbox: A full-screen image viewer: a thumbnail grows into it and shrinks back, arrows and ←/→ step through the set, Esc or a downward drag closes it.
• File diff: A change to one file as a unified diff: line numbers, tinted lines, only the changed words marked, long unchanged stretches folded; give rows or just…
• QR Code: A scannable code set as gradient dots with rounded finder rings and an optional centre mark; a new value ripples out from the centre.
• Slot text: Text and numbers that roll into their new value on reels, digit by digit from the right; other characters fade. Read as plain text by assistive tech.
• Text reveal: A headline whose words rise into place once, the first time it scrolls into view; never repeats.
• Text morph: A short label that becomes its next state letter by letter: shared letters glide into place, new ones arrive, old ones leave.
• Code block: Code to read and copy: highlighted in the system's colours, numbered, marked lines, long files folded behind “Show all”.
• Comment thread: A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread.
• Timeline: What happened, newest first and grouped by day: people with avatars, systems with toned icons, relative times with the exact time on hover, details in…
• Text shimmer: Ongoing work said in words (“Thinking…”) with a calm band of light passing across them; stops when inactive.
• Logo Carousel: A wall of logos shown a few at a time: every few seconds the slots turn left to right, each logo leaving upward as the next rises in.
• Avatar group: A team in a small space: overlapping faces that name themselves on hover or focus, and “+N” naming the rest.
• Advertisement: A sponsor or promo slot that turns through its ads on a hairline that fills; hovering or focusing holds the current ad.
• Avatar: A person or account in a small space: a photo, or initials on the hue their name always gets; presence dot; circle for people, square for companies.
• Item: The generic list row: media, title, description, meta and trailing actions; becomes a link or button when interactive.
• Marker: A labelled point in a stream: a status event with an icon between messages, or a label such as "Today" between two hairlines.
• Badge: A short status, category or count label: six tones, an icon or a status dot, two sizes.
• Kbd: Keyboard keys as keycaps; `mod` resolves to ⌘ or Ctrl per platform, symbols are spoken as words.