@evergreencup/ui-kit

The Evergreen Cup brand and React components for Next.js, in one package: the Pacific Northwest palette as a Tailwind 4 theme, the wordmark and conifer glyph, the hero video and weather layers, buttons, panels, form fields, the site header and footer, tables, chart frames, osu! mappool rows and the tournament pieces (availability grids, rosters, the crowdfund meter).

Distilled from evergreencup.org/apps/web. Peer dependencies: Next.js 16, React 19, Tailwind CSS 4.1+. One runtime dependency: tailwind-merge.

See the example components. The demo is the app in demo/, built from the packed kit on every push to main.

bun add @evergreencup/ui-kit

Setup (five minutes)

1. Theme. In the app's global stylesheet, after Tailwind:

@import "tailwindcss";
@import "@evergreencup/ui-kit/theme.css";

The theme defines the palettes (evergreen, cascade, bark, moss, fog, rain), the semantic tokens (background, surface, surface-elevated, foreground, muted, accent), the font-display utility, the leaf-drift animation, active-underline, parallax-layer, diag-stripes, the coarse: variant, one reduced-motion rule, and the dark page background. Its @source "./" line points Tailwind at the kit's compiled files, so every class the components use is generated.

2. Fonts. All three come from next/font/google. The kit ships no font files or art.

// app/layout.tsx
import { Big_Shoulders_Display, Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const display = Big_Shoulders_Display({
  variable: "--font-big-shoulders",
  subsets: ["latin"],
  weight: ["700", "800", "900"],
});
const sans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const mono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${display.variable} ${sans.variable} ${mono.variable} h-full antialiased`}>
      <body className="flex min-h-full flex-col">{children}</body>
    </html>
  );
}

3. Favicon. app/icon.svg/route.ts, or write the string to app/icon.svg once:

import { faviconSvg } from "@evergreencup/ui-kit";
export const GET = () => new Response(faviconSvg(), { headers: { "content-type": "image/svg+xml" } });

4. MDX (legal pages, disclaimers):

// mdx-components.tsx
import { mdxComponents } from "@evergreencup/ui-kit/mdx";
export const useMDXComponents = () => mdxComponents;

5. Shell. The site's own nav, footer columns and socials are in @evergreencup/ui-kit/site:

import { AccountPill, SiteFooter, SiteHeader } from "@evergreencup/ui-kit";
import { ACCOUNT_NAV, CTA_NAV, FOOTER_COLUMNS, mainNav, SOCIALS, withHref } from "@evergreencup/ui-kit/site";

<SiteHeader
  items={mainNav({ soundtrack: anyTrackRevealed })}
  cta={CTA_NAV}
  account={session ? ACCOUNT_NAV.signedIn : ACCOUNT_NAV.signedOut}
  actions={session ? <AccountPill username={user.username} avatarUrl={user.avatarUrl} isAdmin={user.isAdmin} /> : null}
/>
<main className="flex-1">{children}</main>
<SiteFooter columns={FOOTER_COLUMNS} socials={withHref(SOCIALS, "osu! forum", forumPostUrl)} />

A page in ten lines

import { Container, PageHero, Section, Toc, DataTable, Notice, ButtonLink } from "@evergreencup/ui-kit";

export default function RulesPage() {
  return (
    <>
      <PageHero eyebrow="Rules" title="How the cup runs" lead="Format, mod buckets and match procedure.">
        <ButtonLink href="/register" size="lg">Register</ButtonLink>
      </PageHero>
      <Container className="grid gap-10 py-16 lg:grid-cols-[14rem_1fr]">
        <Toc entries={[{ id: "format", num: "01", title: "Format" }]} />
        <Section id="format" num="01" title="Format">
          <DataTable caption="Star rating per round" columns={[{ label: "Round" }, { label: "SR", mono: true }]} rows={[["Finals", "6.8–7.2"]]} />
          <Notice title="Pending · ref team">Finalized before qualifiers open.</Notice>
        </Section>
      </Container>
    </>
  );
}

What's in it

Everything is exported from @evergreencup/ui-kit (server-safe barrel: client files carry their own "use client").

Brand data

Export	What
BRAND, REGIONS, FONTS	Name, short name, domain, tagline, legal line; the five regions; the three type families with roles, weights, samples, notes
PALETTE, PALETTE_ORDER, PALETTE_INFO, swatches(name)	Every step's hex; palettes in order with labels and descriptions; a palette's steps with readable ink
CORE_COLORS, SEMANTIC_TOKENS	The five committed colors (Mist, Evergreen, Cascade, Bark, Pitch); the semantic tokens and their hexes
contrastRatio, luminance, inkFor, hexToRgb, INK	WCAG color math
CONIFER_PATH, CONIFER_TRUNK, MAPLE_LEAF, SPRIG, faviconSvg(), sprigDataUri()	The marks as data
brandText()	The plain-text brand kit for a designer handoff route

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗