@kylescollin_microsoft/vibesystem

v0.0.5

Published

a month ago

Design system component library — wraps shadcn/ui with token-driven theming for AI-assisted prototyping.

0High
0Medium
0Low

kylescollin_microsoft

react design-system component-library shadcn tailwindcss radix-ui ui-components typescript prototyping

@kylescollin_microsoft/vibesystem

A token-driven, shadcn-style React component library for AI-assisted prototyping. Mirrors the visual language of the Cowork Report 2.0 Figma file (Segoe UI, soft surfaces, blue accent, status-coded tokens) so every prototype Kyle vibes up inherits the same design DNA.

⚛️ React 18 + Tailwind 3 + shadcn/ui patterns (Radix primitives + cva variants)
🎨 Semantic CSS-variable tokens (colors, typography, spacing, radius, shadows)
🌗 Light + dark modes baked in
📐 Pixel-aligned with Figma; safe to drop into any Next.js or Vite app
📦 Ships ESM + CJS + .d.ts, plus a Tailwind preset and compiled stylesheet

Install

pnpm add @kylescollin_microsoft/vibesystem
# peers
pnpm add react react-dom tailwindcss

Setup

1. Import the stylesheet once at your app entry:

import "@kylescollin_microsoft/vibesystem/styles.css";

2. Extend your Tailwind config with the preset so you can use the same utilities in your own code:

// tailwind.config.ts
import preset from "@kylescollin_microsoft/vibesystem/tailwind-preset";

export default {
  presets: [preset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@kylescollin_microsoft/vibesystem/dist/**/*.js",
  ],
};

3. Use a component:

import { Button, KPICard, ReportHeading, Tabs, TabsList, TabsTrigger } from "@kylescollin_microsoft/vibesystem";

export function Example() {
  return (
    <ReportHeading
      title="Cowork Overview"
      subtitle="All sites · Last 30 days"
      tabs={
        <Tabs defaultValue="overview">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="utilization">Utilization</TabsTrigger>
          </TabsList>
        </Tabs>
      }
      actions={<Button>Export</Button>}
    />
  );
}

Theming

Light is the default. Add class="dark" to any ancestor (typically <html>) to opt into dark mode. Every token has a paired dark value.

Tokens

All tokens are CSS variables exposed as Tailwind utilities. Never hardcode colors, sizes, radii, or shadows — always use the named token.

Color (semantic)

| Purpose | Class | |---|---| | Page background | bg-canvas | | Card surface | bg-card, bg-card-muted, bg-card-elevated | | Borders | border-border-subtle, border-border-default, border-border-strong | | Body text | text-text-primary | | Secondary text | text-text-secondary | | Muted / labels | text-text-muted | | Disabled | text-text-disabled | | Brand accent | bg-accent, bg-accent-bg, bg-accent-hover, text-accent | | On-accent surface | text-text-on-accent | | Status — success | text-success, bg-success-bg | | Status — warning | text-warning, bg-warning-bg | | Status — danger | text-danger, bg-danger-bg | | Status — info | text-info, bg-info-bg | | Charts (sequence) | bg-chart-blue, chart-purple, chart-green, chart-amber, chart-red, chart-teal | | Focus ring | ring-focus-ring |

Reserve success / danger for genuine positive/negative meaning. Don't use them as decorative colors.

Typography (semantic ramp)

| Class | Use for | |---|---| | text-display | Page hero numbers | | text-title | H1 (page title) | | text-heading | H2 / card title | | text-body-strong | Emphasis copy | | text-body | Body copy | | text-label | UI labels, button text | | text-caption | Meta / hint | | text-micro | Tiny labels, micro-copy |

Font stack: Segoe UI → system fallback. The Segoe UI Web (West European) WOFF2 cuts are loaded automatically from Microsoft's Fluent / Office Fabric CDN (static2.sharepointonline.com) when you import styles.css, so prototypes render in Segoe UI on macOS, Linux, and any other host where it isn't already installed. Set globally via the preset.

Radius

rounded-pill (999px) · rounded-card (12px) · rounded-inner (8px) · rounded-small (4px)

Elevation

shadow-card (resting) · shadow-hover (hover) · shadow-popover (floating UI). Borders are the primary lift cue.

Spacing

Standard Tailwind 4px scale. Most card chrome uses gap-2/3/4/6, page rhythm uses gap-6/8.

Component catalog

Foundations & surfaces

Icon · Card (+ CardHeader, CardTitle, CardDescription, CardActions, CardContent, CardFooter) · ChartCard

Inputs & actions

Button · IconButton · SegmentedControl · ToggleGroup · SearchInput · Dropdown · DateRangePicker

Navigation

Breadcrumb (+ BreadcrumbTrail) · Tabs (+ TabsList, TabsTrigger, TabsContent, TabsNav, TabsNavLink) · TopNav (+ TopNavBrand, TopNavActions) · SideNav (+ SideNavGroup, SideNavDivider, SideNavItem)

Data display

Badge · Delta · Avatar (+ AvatarGroup) · KPICard · StackedProgressBar · ChartLegend · Table (+ TableHeader, TableBody, TableFooter, TableRow, TableHead, TableSortHeader, TableExpandToggle) · TableCell (+ TableNumericCell, TableProgressCell, TableSparklineCell, TableStatusCell, TableBadgeCell)

Hooks

useTableSort — opt-in tri-state (null → asc → desc → null) sorting state for tables. Pair with TableSortHeader.

Composition

ReportHeading (+ .Filters, .Section)

Every component supports:

ref forwarding
className overrides via cn()
shadcn-style cva variants
both light and dark themes
accessible defaults (visible focus, keyboard nav via Radix where applicable)

Develop

pnpm install
pnpm storybook        # component playground
pnpm test             # vitest
pnpm test:watch
pnpm type-check       # tsc --noEmit
pnpm lint
pnpm build            # tsup → dist/
pnpm build-storybook  # static storybook → storybook-static/

Publishing

pnpm publish runs prepublishOnly (build) automatically. The package is configured as restricted access — flip to public in package.json#publishConfig if you want it on the public registry.

Chromatic (visual regression)

This repo publishes its Storybook to a dedicated Chromatic project for visual regression testing. The project token is scoped per-repo via .env.local + dotenv-cli so a global CHROMATIC_PROJECT_TOKEN env var can never accidentally push this Storybook to a different project.

First-time setup

Copy the template and fill in the real token:
```
cp .env.local.example .env.local
```
Grab the project token from Chromatic → Manage → Configure for the vibesystem project and paste it into .env.local:
```
CHROMATIC_PROJECT_TOKEN=chpt_xxxxxxxxxxxxxxx
```
.env.local is gitignored — never commit it.

Running

pnpm run chromatic     # uploads current Storybook, exits 0 even with changes

The script wraps the Chromatic CLI with dotenv -e .env.local -o --, so the per-repo token always wins (the -o override flag matters — without it, a globally exported CHROMATIC_PROJECT_TOKEN from ~/.zshrc etc. would silently take precedence).

CI

For GitHub Actions, store the token as a repo secret (e.g. CHROMATIC_PROJECT_TOKEN) and pass it to the chromatic action — workflows don't read .env.local.

Figma

Source of truth: Cowork Report 2.0 — designer file. When porting new pieces, match component names and variant prop names exactly. New tokens go in src/tokens/*.css (light + dark) and must be re-exported through tailwind.preset.ts.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@kylescollin_microsoft/vibesystem

Install

Setup

Theming

Tokens

Color (semantic)

Typography (semantic ramp)

Radius

Elevation

Spacing

Component catalog

Foundations & surfaces

Inputs & actions

Navigation

Data display

Hooks

Composition

Develop

Publishing

Chromatic (visual regression)

First-time setup

Running

CI

Figma