@qdesignsystems/design-system-core

Base CSS variables and styles for the Q Design System. Works with standard shadcn/ui components — no custom component library needed.

How it works

This package provides the base CSS variable structure that shadcn/ui components read from. A theme package (e.g. @qdesignsystems/theme-myra) then overrides those variables with the client's brand. The result: all shadcn/ui components automatically render in the correct theme.

Setup

Step 1 — Install

# With the MYRA theme
npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-myra@latest

# With the Q theme
npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-q@latest

Step 2 — Add imports to src/main.tsx (at the very top)

import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-myra/styles.css'; // or theme-q

Step 3 — Clean src/index.css

Remove any :root { } or .dark { } CSS variable blocks. Keep only:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * { @apply border-border; }
  body { @apply bg-background text-foreground; }
}

Step 4 — Use shadcn/ui components normally

npx shadcn@latest add button card input badge

All shadcn/ui components will automatically use the theme colors.

Available Themes

| Package | Description | |---|---| | @qdesignsystems/theme-myra | MYRA theme — blue primary, warm background | | @qdesignsystems/theme-q | Q theme — black primary, clean minimal |