ghost/apps/shade

Shade

Ghost Design System that can be used by micro-frontends.

Usage

Shade is consumed internally across Ghost apps. The package is currently private; when published, consumption will follow standard npm usage.

Example:

import {Button} from '@tryghost/shade';

export function Example() {
    return <Button>Continue</Button>;
}

Tailwind preset:

// tailwind.config.cjs
module.exports = {
    presets: [require('@tryghost/shade/tailwind')],
    // your overrides...
};

Scoping and dark mode:

• All styles are scoped under a .shade container.
• Dark mode is toggled by adding .dark within that scope.

Wrap your surface with ShadeApp (includes provider and scoping):

import ShadeApp from '@tryghost/shade';

<ShadeApp darkMode={false}>
    {/* your UI */}
</ShadeApp>

Develop

This is a monorepo package.

Follow the instructions for the top-level repo.

1. git clone this repo & cd into it as usual
2. Run yarn to install top-level dependencies.

Local docs with Storybook:

• yarn storybook — run Storybook and view docs under src/docs/
• yarn build-storybook — build a static export

Test

• yarn test — type-checks and runs Vitest with coverage
• yarn test:unit — type-checks and runs Vitest
• yarn test:types — TypeScript only
• yarn lint — ESLint for src/ and test/

Notes

• Utilities live at @/lib/utils (not @/utils). Use cn(...) to merge class names and prefer CVA for variants.
• Docs live alongside the code and are rendered via Storybook (src/docs/*).