Skene Design System

A modern, accessible React component library built with TypeScript, Vite, Tailwind CSS, and shadcn/ui components powered by Radix UI primitives.

Built and maintained by Skene Technologies.

Features

• 🎨 Tailwind CSS - Utility-first styling with CSS variables for theming
• 🧩 shadcn/ui - Beautiful, accessible components built on Radix UI
• 📦 Tree-shakeable - ESM and CJS builds with optimized bundle size
• 🔧 TypeScript - Full type definitions included
• 📚 Storybook - Interactive component documentation
• ⚡ Vite - Fast development and optimized builds
• 🎯 Framework agnostic - Works with Next.js, Remix, Create React App, etc.
• 🌓 Dark mode - Built-in dark mode support

Installation

npm install @skene/design-system

Usage

In Next.js

// app/layout.tsx or pages/_app.tsx
import "@skene/design-system/styles.css";

// In your components
import { ShadcnButton, ShadcnCard } from "@skene/design-system";

export default function Page() {
  return (
    <ShadcnCard className="w-[350px]">
      <ShadcnButton variant="default">Click me</ShadcnButton>
    </ShadcnCard>
  );
}

Tailwind Configuration

If you're using Tailwind CSS in your Next.js app, extend your config to include the design system:

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@skene/design-system/dist/**/*.{js,mjs}",
  ],
  // ... rest of your config
};

In Regular React

import { ShadcnButton, ShadcnCard, cn } from "@skene/design-system";
import "@skene/design-system/styles.css";

function App() {
  return (
    <div className="p-4">
      <ShadcnButton>Hello World</ShadcnButton>
    </div>
  );
}

Development

Install dependencies

npm install

Start Storybook

npm run storybook

Build the library

npm run build

Linting

# Run ESLint for JavaScript/TypeScript
npm run lint

# Run Stylelint for CSS
npm run lint:css

# Run all checks (TypeScript + ESLint + Stylelint)
npm run ci

Components

shadcn/ui Components (Recommended)

Components

• ShadcnButton - Versatile button component with multiple variants
• ShadcnCard - Card container with header, footer, and content sections
• ProjectGrid - Responsive grid layout with search functionality
• ProjectCard - Individual project card with hover effects
• MilestoneTracker - Interactive milestone/onboarding progress tracker with animated checkboxes
• CodebaseAnalyzer - Real-time codebase analysis display with issue findings and AI-powered fix suggestions
• ShadcnButton - Versatile button with CVA variants (default, destructive, outline, secondary, ghost, link)
• ShadcnCard - Flexible card container with header, content, and footer sections

Utilities

• cn() - Class name utility combining clsx and tailwind-merge

Customization

The design system uses CSS variables for theming. Override them in your application:

:root {
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... other variables */
}

.dark {
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... other variables */
}

Adding shadcn/ui Components

This design system is configured to work with shadcn/ui. To add more components:

npx shadcn-ui@latest add button

Components will be added to src/components/ and automatically configured.

Publishing

1. Update version in package.json and CHANGELOG.md
2. Run linting checks: npm run ci
3. Build the library: npm run build
4. Publish to npm: npm publish

Note: The build uses skipDiagnostics: true for type generation since stub implementations are used for Next.js and Supabase dependencies in Storybook.

Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS v4 - Utility-first CSS with modern architecture
• Radix UI - Accessible component primitives
• CVA - Class Variance Authority for component variants
• Storybook - Component documentation
• ESLint - JavaScript/TypeScript linting
• Stylelint - CSS linting with property ordering and logical CSS

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Clone the repository
2. Install dependencies: npm install
3. Start Storybook: npm run storybook
4. Make your changes
5. Run linting: npm run ci
6. Build and test: npm run build
7. Submit a pull request

Maintainers

• Petri Lahdelma - [email protected]
• Teppo Hudsson - [email protected]

License

MIT © Skene Technologies

Note: While this design system is open source under the MIT License, Skene and skene.ai are proprietary technologies. All rights reserved by Skene Technologies.

For detailed documentation, see GETTING_STARTED.md