@blueshift-gg/ui-components

Blueshift Design System - UI Component Library

Overview

This package contains the core UI components for the Blueshift Design System, built with:

• React 19 - UI library
• Motion (formerly Framer Motion) - Animation library
• Tailwind CSS v4 - Styling with CSS-first configuration
• TypeScript - Type safety
• tsup - Build tool for ESM/CJS output

Installation

This is an internal package in the monorepo. To use it in another workspace:

{
  "dependencies": {
  "@blueshift-gg/ui-components": "workspace:*"
  }
}

Usage

Importing Components

import { Button } from "@blueshift-gg/ui-components/button";

function App() {
  return <Button>Click me</Button>;
}

Importing Styles

Import the complete stylesheet (includes Tailwind + theme):

@import "@blueshift-gg/ui-components/styles";

Or import just the theme variables:

@import "tailwindcss";
@import "@blueshift-gg/ui-components/theme.css";

Theme Customization

The theme is defined in src/theme.css using Tailwind CSS v4's @theme directive. Customize colors, fonts, spacing, and more:

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-sans: "Inter", system-ui, sans-serif;
  /* ... */
}

Building

The package uses tsup for building:

pnpm build

This generates:

• ESM output in dist/
• CommonJS output in dist/
• TypeScript declarations

Development

# Type checking
pnpm check-types

# Linting
pnpm lint

Exports

Components are exported individually for tree-shaking:

import { Button } from "@blueshift-gg/ui-components/button";
import { Card } from "@blueshift-gg/ui-components/card";

Styles are exported separately:

@import "@blueshift-gg/ui-components/styles";     /* Complete styles */
@import "@blueshift-gg/ui-components/theme.css";  /* Theme only */