FeedbackAvailable

Completion Emblem

Decorative emblem for a completed lesson or course with a one-time celebration.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/completion-emblem.json

Usage

Import the component into your project and keep the source code under your control.

tsx

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CompletionEmblem } from "@/components/ui/completion-emblem";
export default function Demo() {
  const [round, setRound] = useState(0);
  return (
    <div className="grid justify-items-center gap-6 p-6">
      <div className="flex gap-10">
        <CompletionEmblem key={`check-${round}`} celebrating={round > 0} />
        <CompletionEmblem key={`trophy-${round}`} variant="trophy" celebrating={round > 0} />
      </div>
      <Button variant="outline" onClick={() => setRound(round + 1)}>Celebrate again</Button>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
variant	check \| trophy	check	Lesson (mint check) or course (yellow trophy).
celebrating	boolean	false	Plays the entrance and particles once; pass false for reduced motion.

Accessibility

Rules that should remain intact when adapting the component to a product.

Decorative; the completion title and a status message carry the meaning.

Particles and motion are skipped with reduced motion.