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

When using Vite, Canopy must be included in your primary .css file in order to ensure the necessary CSS classes are included in the build. For more details, read the Tailwind CSS documentation on explicitly registering sources.

Example index.css:

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

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

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