Canopy

React components, built with Tailwind CSS, Shadcn, and VisX

Resources

• Github repo
• Distribution
  • npm registry
• Building blocks
  • TailwindCSS
  • shadcn-ui
    • color themes
  • Vite
  • Vitest
• Documentation via Storybook
  • Github Pages - docs only
• Development
  • CodeCov
  • Renovate
• Other documentation, documents
  • Changelog

Usage

Installation

Canopy provides foundational styles (colors, theme, typography, dimensions) as importable CSS. Import the styles in your primary .css file:

@import "tailwindcss";
@import "@still-forest/canopy/styles";
@source "../node_modules/@still-forest/canopy/dist";

@layer base {
  /* your usual CSS definitions */
}

The @import provides Canopy's design tokens, theme variables, and utility classes. The @source directive ensures Tailwind detects classes used by Canopy components (docs).

You can also import individual style modules:

@import "@still-forest/canopy/styles/theme.css";
@import "@still-forest/canopy/styles/typography.css";

Customization

Override any Canopy design tokens by redefining CSS variables after the import:

@import "@still-forest/canopy/styles";

:root {
  --font-brand: "My Custom Font", serif;
  --color-brand: #4a90d9;
}

Testing locally

Using pnpm link

1. In this package, run build in watch mode:

pnpm build:watch

Then expose it locally for linking:

pnpm link

2. In the consuming package, link package.json to the locally built version:

pnpm link @still-forest/canopy

3. When done, cleanup:

pnpm unlink @still-forest/canopy
pnpm store prune # clear pnpm's global store

Using pnpm add

1. In this package, run build in watch mode:

pnpm build:watch

2. In the consuming package, point package.json to the locally built version:

pnpm add ~/Development/canopy

Direct file copy

Alternatively, directly copy the built version periodically:

rm -rf ./node_modules/@still-forest/canopy/dist && cp -r ~/Development/canopy/dist ./node_modules/@still-forest/canopy/dist