Components

Buttercut is built on one idea: list everything in magazine cards. Hover the first example below — then explore link rows, greetings, and the rest.

Everything is a card

Every section on a Buttercut site is a .mag-card. Hover any box below — it lifts, the shadow grows, and the bottom edge turns bronze.

Primary card

Home widgets, about sections, and sandbox panels use .mag-card. Hover this box — it lifts, the shadow grows, and the bottom edge warms to bronze.

Inset card

Nested lists use .mag-card-inset — same lift and accent border, lighter shadow.

Nested example
Course projects

On a real page, inset cards sit inside a parent card — like Projects on the home page.

Animated greeting

The hero wave you see on personal sites — letters hop one after another.

Contextual tips

Hover or tap the help icon. Tooltips float above the page without shifting layout.

Listening card footerSpotify, Last.fm, or your own OAuth — enable in site.config.ts

Project cards

List rows for home pages; card grids for project galleries. Same hover language throughout.

List row

buttercut

★128
GitHub

Configurable Next.js theme distilled from kaichen.dev.

Next.jsTypeScript

Pill links & buttons

Compact actions with optional arrows — used in nav footers and education links.

Get StartedSandboxGitHub

Social icons

Monochrome by default; each network gets its brand color on hover.

View sourcehello@example.comInfo — edit social links and this tooltip in site.config.ts.

Full reference

For developers — expand when you need names, paths, and config fields.

Layout & shell

  • .mag-card

    Primary surface — every major section. Lifts on hover with accent border.

  • .mag-card-inset

    Nested list surface inside a parent card — same hover, lighter shadow.

  • .mag-label

    11px uppercase section title above card content

  • ButtercutNav

    Fixed header, mobile menu, theme toggle

  • ButtercutSiteFooter

    Copyright footer with optional attribution link

  • ButtercutPageToc

    Floating section navigator (portal)

  • ButtercutTocSection

    Explicit scroll target for TOC

  • ButtercutIdentityRow

    Hero grid with adaptive avatar sizing

  • ButtercutSubpageEnter

    Subpage fade-in wrapper

  • ButtercutThemeProvider

    Light / dark / system theme context

  • ButtercutThemeToggle

    Nav sun/moon control

Typography & links

  • ButtercutJumpText

    Animated greeting letters

  • ButtercutHoverLinkArrow

    Leading ↗ on row hover

  • ButtercutHoverLinkDestinationHint

    Trailing destination label + ↗

  • ButtercutHoverLinkHint

    Trailing custom hint text

  • ButtercutHoverTip

    Tooltip bubble — hover or tap-to-toggle

  • ButtercutMagChip

    Pill link, button, or span with optional arrows

Hero & identity

  • ButtercutHero

    Home identity — product (title + intro) or personal (avatar + greeting)

  • ButtercutAvatarCard

    Next/Image portrait fill

  • ButtercutSocialIcons

    Monochrome social row with brand hovers

  • ButtercutGwwcBadge

    Optional pledge badge beside title

Home blocks

  • ButtercutStatusRow

    Listening + Location side-by-side

  • ButtercutNowPlayingBlock

    Listening card wrapper

  • ButtercutWeatherBlock

    Location card with SSR weather

  • ButtercutDemoProjects

    Projects mag-card on home

  • ButtercutIntegrationsPanel

    Env / config status table

Projects & lists

  • ButtercutProjectsSplit

    Featured + personal project columns

  • ButtercutPinnedProjectLink

    GitHub repo row or card

  • ButtercutCourseProjectLink

    Featured / course project card

  • ButtercutProjectStars

    Star count + archived badge

  • ButtercutGitHubActivity

    Contribution heatmap

Integrations

  • ButtercutListeningCard

    Now playing + last month top tracks

  • ButtercutListeningTrackRow

    Single track with hover hints

  • ButtercutWeatherCard

    Weather illustration + local time

  • ButtercutWeatherIllustration

    SVG weather state art

  • ButtercutLocalTime

    Live clock for a timezone