Basic Design System (@sashystik89/basic-ds)

A lightweight React-friendly design system created to enhance and update existing pet projects, providing:

• Variables: colors, typography, spacing, border-radius, and more

• Utility Classes: quick CSS helpers for padding, margin, flex/grid, text styles, etc.

• Components: reusable UI components (e.g., buttons, cards, form elements)

• Storybook: interactive component and style previews

Installation

npm install @sashystik89/basic-ds

or

yarn add @sashystik89/basic-ds

Compatibility

Supported React: 18 → 19 (You must use a single copy of React in your app.)

• React / React-DOM: 18.x, 19.x,
• Node: 18+ (Node 20 recommended)
• Module formats: ESM (default) + CJS
• Bundlers: Vite, Webpack, Next.js (app/router) - as long as only one React is present

Usage

Load the stylesheet (required)

Import the design system CSS once at your app entry:

// src/index.tsx (or App.tsx) in your app
import '@sashystik89/basic-ds/styles.css'

Then use components as usual:

import { Button } from '@sashystik89/basic-ds'

export function Example() {
  return <Button label="Click me" variant="primary" />
}

⚠️ 🚧 A Work-in-progress

Using with Vite (important)

To avoid React runtime duplication and weird “owner stack” errors, add this to your consumer app config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    // Only transform your own source files
    react({ jsxRuntime: 'classic', include: ['src/**/*.{js,jsx,ts,tsx}'] })
  ],
  resolve: {
    // ensure a single React instance
    dedupe: ['react', 'react-dom']
  },
  optimizeDeps: {
    // do NOT prebundle the design system or JSX runtimes
    exclude: ['@sashystik89/basic-ds', 'react/jsx-runtime', 'react/jsx-dev-runtime']
  }
})

After changing config or dependencies, clear Vite’s cache:

  rm -rf node_modules/.vite

Version changing

   npx changeset add

  npx changeset version

Contributing

⚠️ 🚧 A Work-in-progress

License

This project is licensed under the MIT License. Feel free to use and adapt it in your own projects.