March 31, 2026

Overview

stardewCN is a free, open-source React component library featuring 38 pixel-perfect UI components inspired by Stardew Valley's iconic aesthetic. Published on npm as stardewcn, it brings the charming retro-pixelated feel of the game to modern React applications.

Key Features

• 38 Components: Buttons, panels, dialogue boxes, heart meters, inventory grids, progress bars, tooltips, modals, and more.
• Pixel-Perfect Aesthetic: 3-layer panel design, golden/brown palette, pixel fonts (VT323, Press Start 2P), and game-accurate shadows.
• Fully Tested: 57 test files with 90%+ coverage thresholds using Vitest and React Testing Library.
• Accessible: ARIA attributes, keyboard navigation, and focus-visible styling built into every component.
• Documentation Site: Full Next.js docs site with interactive examples for every component.
• Dual Format: Ships as both ESM and CJS with TypeScript declarations.

Components Highlights

• DialogueBox - NPC-style dialogue with speaker labels and choice buttons
• HeartMeter - Pixel heart relationship meter with animated fill
• InventoryGrid - Grid layout with item quality indicators (basic/silver/gold/iridium)
• SeasonBanner - Seasonal banners with Spring, Summer, Fall, Winter themes
• GoldCounter - Animated coin counter with Stardew gold styling
• Panel - The signature 3-layer frame container (outer dark, contrast border, inner gradient)

Tech Stack

• Library: React 18/19, TypeScript, Tailwind CSS v4, CVA
• Build: tsup (ESM + CJS), pnpm monorepo with Turbo
• Docs: Next.js 15 with MDX
• Testing: Vitest, React Testing Library, 90%+ coverage

Inspiration

Inspired by warcraftcn by OrcDev. If they can do WoW-themed components, why not Stardew Valley?