award-default
GOLD
WINNER
A Design Award & Competetion
Ali Imam
June 2025
"use client"
import { Awards } from "@/components/ui/common/award"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Awards
variant="award"
title="WINNER"
subtitle="A Design Award & Competetion"
recipient="Ali Imam"
date="June 2025"
level="gold"
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/award-default.json"award-certificate
Certificate of WINNER
This is to certify that
Ali Imam
A Design Award & Competetion
Awarded on: June 2025
"use client"
import { Awards } from "@/components/ui/common/award"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Awards
variant="certificate"
title="WINNER"
subtitle="A Design Award & Competetion"
recipient="Ali Imam"
date="June 2025"
level="gold"
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/award-certificate.json"award-stamp
Ali Imam
June 2025
"use client"
import { Awards } from "@/components/ui/common/award"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Awards
variant="stamp"
title="WINNER"
subtitle="A Design Award & Competetion"
recipient="Ali Imam"
date="June 2025"
level="gold"
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/award-stamp.json"award-badge
WINNER
A Design Award & Competetion
by Ali Imam
•June 2025
"use client"
import { Awards } from "@/components/ui/common/award"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Awards
variant="badge"
title="WINNER"
subtitle="A Design Award & Competetion"
recipient="Ali Imam"
date="June 2025"
level="gold"
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/award-badge.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/award.json
Usage
import { Awards } from "@/components/ui/award"<Awards
variant="award"
title="WINNER"
subtitle="A Design Award & Competetion"
recipient="Ali Imam"
date="June 2025"
level="gold"
/>API Reference
Awards
A flexible award component that supports multiple visual variants (stamp, award, certificate, badge) with customizable details.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "stamp" | "award" | "certificate" | "badge" | "award" | Determines the style of the award display. |
title | string | – | Main title of the award. |
subtitle | string | – | Subtitle or secondary text. |
description | string | – | Additional descriptive text. (Currently not used in all variants) |
date | string | – | Date of the award or certificate. |
recipient | string | – | Name of the award recipient. |
level | "bronze" | "silver" | "gold" | "platinum" | "gold" | Award level (used in award variant with gradient styling). |
className | string | – | Tailwind/CSS classes for extra styling. |
showIcon | boolean | true | Whether to show an icon in some variants (e.g., stamp). |
customIcon | React.ReactNode | – | Custom React node to replace the default icon. |