Staaarter

Code of Conduct Section

Community-standards display: a heading and intro, a grid of principle cards (e.g. Respect, Inclusion, Safety) each with an icon, short title, and one-line description, followed by a short "how to report an issue" contact block. Perfect for event policies and community guidelines.

By Staaarter Team
Event
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/code-of-conduct-section.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/event/event32.tsx instead.

Usage

The file also exports event32Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Event32, event32Demo } from "@/components/blocks/event/event32";

export default function Page() {
  return <Event32 {...event32Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedSmall label above the heading.
headingReactNodenoneSection heading.
descriptionstringundefinedSupporting paragraph under the heading.
principlesConductPrinciple[]nonePrinciple cards, each with an icon, title, and one-line description.
reportHeadingstring"How to report an issue"Heading for the bottom contact block.
reportDescriptionstringundefinedSupporting text for the bottom contact block.
reportEmailstring"[email protected]"Contact email, rendered as a mailto link.
classNamestringnoneExtra classes for the outer section element.

Types

interface ConductPrinciple {
  icon: LucideIcon;
  title: string;
  description: string;
}

Behavior notes

  • The report contact link renders as a plain mailto link (Button variant="link" with render={<Link/>}); there is no real contact form or backend call, it's decorative in the demo.