Made of something. An armoured red optical lens with a lower-left glow, worn metal surround and a damaged material state.

The moment. Selecting creates the impact and cracks together. The red lens then powers down, leaving a stable damaged selected state. Unchecking restores the lens.

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

Select the lens to break the glass and power it down.

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-ward-checkbox.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-ward-checkbox

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/ward-checkbox-demo.tsx
"use client";

import { WardCheckbox } from "@/components/grimkit/ward-checkbox";

export default function Example() {
  return <WardCheckbox label="Mark target" name="target" description="Select to mark the target." />;
}

API Reference

Props on Visor Checkbox. Consult the included TypeScript source for supported native attributes.

PropTypeDefault
checked / defaultCheckedNative controlled or initial checked state.booleanfalse
onCheckedChangeReports the native input state immediately.(checked: boolean) => void–
name / form / required / disabledPreserved on the native checkbox.Native input attributes–
label / descriptionAccessible visible label and optional supporting description.string–
classNameAdditional class on the control surface; does not replace the material styles.string–
effectsAuto honours reduced motion; off disables decorative motion and particles."auto" | "off""auto"

Information

Category
GrimKit
Files
  • components/grimkit/ward-checkbox.tsx
  • components/grimkit/modern-visor-checkbox.tsx
  • components/grimkit/modern-foundation.css
  • components/grimkit/modern-visor-checkbox.css
  • components/grimkit/modern-visor-checkbox-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.2.0
Updated
Sep 22, 2026
Registry
grimkit-ward-checkbox

Updated Sep 22, 2026