MacTech / Design System
Cyan

Install

Adopt MacTech in five steps.

Same flow for every app: tokens via npm, components via shadcn CLI, mood via a single CSS import.

  1. 1. Configure the package registry

    Add an .npmrc at your repo root pointing the @mactech-solutions-llc scope at GitHub Packages. Set NODE_AUTH_TOKEN in your shell or CI to a personal access token with read:packages scope.

    @mactech-solutions-llc:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

  2. 2. Install the tokens package

    One package, four moods, a Tailwind preset, and font bundles for next/font/google.

    npm install @mactech-solutions-llc/design-tokens

  3. 3. Wire the Tailwind preset

    Spread mactechPreset into your tailwind.config.ts to expose mt-* utilities.

    import { mactechPreset } from "@mactech-solutions-llc/design-tokens";

export default {
  presets: [mactechPreset],
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
};

  4. 4. Pick a mood

    Import the mood CSS and set data-mt-mood on a wrapper. Use vivid for dashboards, quiet for documents, editorial for long-form, brutalist for opinionated demos.

    /* app/globals.css */
@import "@mactech-solutions-llc/design-tokens/moods/vivid.css";

  5. 5. Pull a component

    All v0.1 components are shadcn-CLI-installable from this registry.

    npx shadcn@latest add https://mactech-design-registry-production.up.railway.app/r/kinetic-text.json

Looking for a component? Browse the registry →