@rakeyshgidwani/skyline-patterns

Composite UI patterns built on @rakeyshgidwani/skyline-primitives.

Installation

npm install @rakeyshgidwani/skyline-patterns @rakeyshgidwani/skyline-primitives @rakeyshgidwani/skyline-tokens

Required: Tailwind @source configuration

Warning — do not skip. Tailwind v4 only emits CSS for classes it sees during its file scan. It does not scan node_modules by default. Without the @source lines below, every class used inside primitives and patterns will be silently pruned from your production build and components will render unstyled in production (dev may appear to work).

In your app's main Tailwind entry (e.g. src/tailwind.css):

@import 'tailwindcss';
@import '@rakeyshgidwani/skyline-tokens/themes/jeremy.css';

@source '../node_modules/@rakeyshgidwani/skyline-primitives/dist/esm/index.js';
@source '../node_modules/@rakeyshgidwani/skyline-patterns/dist/esm/index.js';

@theme {
  /* same theme aliases as skyline-primitives */
}

Both @source lines are required — primitives AND patterns. Adjust the relative path (../) to match your CSS file's location.

Layer

This package is L3 in a three-layer design system:

• L1 — @rakeyshgidwani/skyline-tokens — raw design tokens (colors, spacing, typography, motion)
• L2 — @rakeyshgidwani/skyline-primitives — unopinionated React components (buttons, inputs, dialogs)
• L3 — @rakeyshgidwani/skyline-patterns — opinionated compositions (navigation menus, data cards, forms, tables)