Installation

Get stardewCN set up in your project in a few steps.

1. Install the package

Install stardewCN using your preferred package manager:

npm

npm install stardewcn

pnpm

pnpm add stardewcn

yarn

yarn add stardewcn

2. Import styles

Import the stardewCN stylesheet in your app entry point or layout file. This provides the base styles for all components.

import 'stardewcn/styles.css'

3. Tailwind CSS setup

stardewCN components use Tailwind CSS v4 for styling. You need to tell Tailwind to scan the library source files so that component classes are included in your build output. Add the following @source directive to your CSS file:

/* In your main CSS file (e.g., globals.css) */
@import "tailwindcss";
@source "node_modules/stardewcn/src/**/*.{ts,tsx}";

This ensures that Tailwind generates all the utility classes used by stardewCN components.

4. Font setup

stardewCN uses two Google Fonts to achieve the Stardew Valley aesthetic: VT323 for dialogue and body text, and Press Start 2P for headings.

Add this to your HTML <head>:

<link
  href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap"
  rel="stylesheet"
/>

Or import the fonts in your CSS:

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

5. Start using components

You are all set. Import any component from stardewcn and start building:

import { Button, DialogueBox, Panel } from 'stardewcn'
import 'stardewcn/styles.css'

function App() {
  return (
    <Panel>
      <DialogueBox speaker="Pierre">
        Welcome to Pierre's General Store!
      </DialogueBox>
      <Button>Buy Seeds</Button>
    </Panel>
  )
}