Staaarter

Institutional Quick Facts

Quick facts grid displaying key institutional statistics: large value, label, and short description per tile, e.g. student body size, faculty ratio, acceptance rate, and endowment. Perfect for a university at-a-glance section.

By Staaarter Team
Education
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/institutional-quick-facts.json

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

Usage

The file also exports education2Demo, 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 { Education2, education2Demo } from "@/components/blocks/education/education2";

export default function Page() {
  return <Education2 {...education2Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringnoneSmall uppercase label above the heading; only rendered when set.
headingReactNodenoneSection heading, centered above the facts grid.
descriptionstringundefinedCentered intro text below the heading.
factsFactItem[]noneFact tiles rendered in a fixed 4-column grid with hairline dividers between them.
classNamestringnoneExtra classes for the outer section element.

Types

type FactItem = {
  value: string;
  label: string;
  description?: string;
};

Behavior notes

  • facts always renders in a fixed 2-column grid on mobile and 4-column grid on desktop; more than 4 items will wrap to additional rows rather than reflowing column count.
  • Hairline dividers between tiles come from a 1px background-color grid gap, not individual borders, so they stay crisp regardless of theme.
  • Each fact's description is optional and independent; a tile with only a value and label still sits flush against its neighbors.
  • This is a static display grid; no value updates or fetches live data.