Rotating Text Seal

A rotating circular text badge with a center icon for editorial seals and open for work stamps.

Installation

Adds the component and everything it depends on to your project.

npx shadcn add https://ui.beste.co/component/r-base/badge10

Usage

The import and the props worth knowing about, in one place.

import { Badge10 } from "@/components/beste/component/badge10";
import { Sparkle } from "lucide-react";

// End the text with a separator so the loop reads cleanly.
<Badge10 text="Open for work • Available now • " size={120} />

<Badge10
  text="Award winning studio • Est. 2019 • "
  icon={Sparkle}     // center icon (default: Asterisk)
  tone="muted"       // "foreground" (default) | "muted" | "primary"
  duration={20}      // seconds per rotation
  size={140}         // diameter in px
/>

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Usage

import { Badge10 } from "@/components/beste/component/badge10";

<Badge10
  text="Open for work • Available now • "
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`text`*	`string`	—	Circular text. End with a separator (e.g. "Open for work • ") so the loop reads cleanly
`size`	`number`	—	Diameter in pixels
`duration`	`number`	—	Seconds per full rotation
`icon`	`LucideIcon`	—	Center icon (defaults to Asterisk)
`tone`	`"foreground" \| "muted" \| "primary"`	—	Text and icon color
`className`	`string`	—	Additional classes merged onto the root