Oath Banner | Sean Lynch

Made of something. Blackened armour, thick wrapped parchment and a deep-red wax seal.

The moment. An accepted acknowledgement seats the seal and changes the action label. The parchment remains attached to the housing at every size.

Yours to adapt. Copy the component source, styles and materials. Functional text stays live, effects respect reduced motion, and the artwork requires no remote hosting.

Try it

Acknowledge the message to seat the seal and record the response.

Install

Add it with the shadcn CLI, or copy the source manually.

Release candidate: public installation becomes available after deployment. Use an existing React 19 project with shadcn initialized and a components.json file. The CLI installs the source, CSS, embedded materials, MIT licence and font notices together.

Terminal

npx shadcn@latest add https://seanportfol.io/r/grimkit-oath-banner.json

Prefer a namespace? Register the registry once.

Terminal

npx shadcn@latest registry add @seanlynch=https://seanportfol.io/r/{name}.json

Terminal

npx shadcn@latest add @seanlynch/grimkit-oath-banner

Usage

Copy this example into a separate file, not over the installed component. The @/ alias points to your source root. In Next.js this is a Client Component; Vite also accepts the directive. Replace demonstration actions with your application logic.

components/examples/oath-banner-demo.tsx

"use client";

import { OathBanner } from "@/components/grimkit/oath-banner";

export default function Example() {
  return <OathBanner title="Oath of custody"><p>Guard what is entrusted to you. Let the record stand.</p></OathBanner>;
}

API Reference

Props on Oath Banner. Consult the included TypeScript source for supported native attributes.

PropTypeDefault

titleLive heading and accessible name.string–

childrenLive React content, never baked into artwork.ReactNode–

acknowledgedControlled acknowledgement state.boolean–

defaultAcknowledgedInitial uncontrolled acknowledgement.booleanfalse

onAcknowledgedChangeReports an accepted acknowledgement.(acknowledged: boolean) => void–

onAcknowledgeCalled on acknowledgement. preventDefault cancels the local acknowledgement.(event: MouseEvent<HTMLButtonElement>) => void–

actionLabelOptional action label.string'Acknowledge'

acknowledgedLabelOptional acknowledged label.string'Recorded'

disabledDisables user interaction and cancels transient effects.booleanfalse

effectsAuto honours reduced motion; off suppresses decorative motion without changing values.'auto' | 'off''auto'

actionPropsOptional action props.Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'disabled' | 'aria-disabled'>–

Native attributesUnclaimed native attributes, event handlers and aria-* attributes are forwarded. Inputs can be named with a surrounding label or aria-label.HTMLAttributes<HTMLElement>–

Information

Category: GrimKit
Files: components/grimkit/oath-banner.tsx
components/grimkit/oath-banner.css
components/grimkit/oath-banner-materials.css
components/grimkit/LICENSE.txt
components/grimkit/Saira-OFL.txt
components/grimkit/JetBrainsMono-OFL.txt
Dependencies: React 19 and React DOM 19; no additional runtime packages
Compatibility: React 19, TypeScript, CSS imports, Modern browsers
Version: 0.3.0
Updated: Sep 24, 2026
Registry: grimkit-oath-banner