![./public/screenshot.png](./public/screenshot.png)

# Skene Design System

[![npm version](https://badge.fury.io/js/@skene%2Fdesign-system.svg)](https://www.npmjs.com/package/@skene/design-system)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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](https://skene.ai).

## 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

```bash
npm install @skene/design-system
```

## Usage

### In Next.js

```tsx
// 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:

```js
// 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

```tsx
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

```bash
npm install
```

### Start Storybook

```bash
npm run storybook
```

### Build the library

```bash
npm run build
```

### Linting

```bash
# 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:

```css
: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:

```bash
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](CONTRIBUTING.md) 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** - [petri@skene.ai](mailto:petri@skene.ai)
- **Teppo Hudsson** - [teppo@skene.ai](mailto:teppo@skene.ai)

## License

MIT © [Skene Technologies](https://skene.ai)

**Note:** While this design system is open source under the MIT License, Skene and [skene.ai](https://skene.ai) are proprietary technologies. All rights reserved by Skene Technologies.

---

For detailed documentation, see [GETTING_STARTED.md](GETTING_STARTED.md)