SolidJS Component Library (Design System)

A modular and treeshakeable SolidJS component library built with TypeScript, Tailwind CSS, SCSS Modules, and Storybook.

Features

- ✅ SolidJS with TypeScript
- ✅ Modular Builds - Individual components can be built separately
- ✅ Treeshakeable - Side-effect free with proper exports
- ✅ Design System - Comprehensive design tokens and consistent styling
- ✅ Tailwind CSS + SCSS Modules with design tokens
- ✅ Storybook for component documentation and development
- ✅ Vite for fast building and development
- ✅ Unit Testing with Vitest and Solid Testing Library

Design System Approach

This component library follows a systematic design system approach with:

$3

All styling is based on design tokens defined in tailwind.config.js:

- Colors: Primary, secondary, success, warning, error, and neutral palettes
- Typography: Consistent font sizes, weights, and line heights
- Spacing: 4px base unit with consistent scale
- Shadows: Pre-defined shadow styles for different components
- Border Radius: Consistent border radius scale
- Animations: Standardized transitions and keyframes

$3

``typescript
// Colors
bg-primary, text-primary, border-primary
bg-secondary, text-secondary, border-secondary
bg-success, text-success, border-success
bg-warning, text-warning, border-warning
bg-error, text-error, border-error
bg-gray-100 through bg-gray-900

// Typography
text-xs, text-sm, text-base, text-lg, text-xl, text-2xl
font-normal, font-medium, font-semibold, font-bold

// Spacing
p-1 through p-64 (4px to 256px)
m-1 through m-64 (4px to 256px)

// Shadows
shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl
shadow-button, shadow-card, shadow-focus

// Border Radius
rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-full
`

Project Structure

`
src/
├── components/
│ ├── Button/
│ │ ├── Button.tsx
│ │ ├── Button.module.scss
│ │ ├── Button.stories.tsx
│ │ ├── Button.test.tsx
│ │ └── index.ts
│ └── Badge/
│ ├── Badge.tsx
│ ├── Badge.module.scss
│ ├── Badge.stories.tsx
│ ├── Badge.test.tsx
│ └── index.ts
├── styles/
│ └── globals.css
├── test/
│ └── setup.ts
└── index.ts
`

Available Scripts

`bash


Development

npm run dev # Start Vite dev server
npm run storybook # Start Storybook on port 6006

Building

npm run build # Build all components (modular + monolithic)
npm run build:standalone # Build as single stand-alone library bundle
npm run build:individual # Build each component separately
npm run build:all # Build everything together (default)
npm run build:clean # Clean and build everything

Testing

npm test # Run unit tests
npm run test:ui # Run tests with UI
npm run test:coverage # Run tests with coverage

Storybook

npm run storybook # Start Storybook development server
npm run build-storybook # Build Storybook for production
`

Build Modes & Publishing

$3

Build and publish as a complete library:

`bash


Build stand-alone bundle

npm run build:standalone

Output files:

- shared-solid-v2.js (ES Module)

- shared-solid-v2.cjs (CommonJS)

- shared-solid-v2.css (Styles)

- index.d.ts (TypeScript declarations)

`

Usage:
`bash
npm publish
`

Installation & Usage:
`bash
npm install shared-solid-v2
`

`tsx
import { Button, Badge } from 'shared-solid-v2'
import 'shared-solid-v2/styles'

function App() {
return (



)
}
`

$3

Build and publish each component separately for maximum treeshaking:

`bash


Build individual components

npm run build:individual

Output files for each component:

- Button.js, Button.cjs, Button.d.ts

- Badge.js, Badge.cjs, Badge.d.ts

- shared-solid-v2.css (Shared styles)

`

Setup for Individual Publishing:

1. Create separate package.json for each component (example: components/Button/package.json):

`json
{
"name": "@your-org/button",
"version": "1.0.0",
"main": "./Button.cjs",
"module": "./Button.js",
"types": "./Button.d.ts",
"files": ["Button.*", "../shared-solid-v2.css"],
"peerDependencies": {
"solid-js": "^1.8.0"
}
}
`

2. Publish each component individually:

`bash


From components/Button directory

npm publish

From components/Badge directory

npm publish
`

Installation & Usage:
`bash
npm install @your-org/button @your-org/badge
`

`tsx
import { Button } from '@your-org/button'
import { Badge } from '@your-org/badge'
import '@your-org/button/styles' // or @your-org/badge/styles

function App() {
return (



)
}
`

$3

Build everything together for maximum flexibility:

`bash


Build all modes together

npm run build:all

This creates:

- Complete library bundle (index.js, index.cjs)

- Individual component bundles (Button.js, Badge.js)

- Shared CSS file

- TypeScript declarations for all

`

Package.json exports support both patterns:

`json
{
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"./Button": {
"types": "./dist/Button.d.ts",
"import": "./dist/Button.js",
"require": "./dist/Button.cjs"
},
"./Badge": {
"types": "./dist/Badge.d.ts",
"import": "./dist/Badge.js",
"require": "./dist/Badge.cjs"
},
"./styles": "./dist/shared-solid-v2.css"
}
}
`

Usage Examples:

`tsx
// Import everything
import { Button, Badge } from 'shared-solid-v2'

// Import individual components (treeshaking)
import { Button } from 'shared-solid-v2/Button'
import { Badge } from 'shared-solid-v2/Badge'

// Import styles separately
import 'shared-solid-v2/styles'
`

Installation

`bash
npm install shared-solid-v2
`

Usage

$3

`tsx
import { Button, Badge } from 'shared-solid-v2'
import 'shared-solid-v2/styles'

function App() {
return (



)
}
`

$3

`tsx
import { Button } from 'shared-solid-v2/Button'
import 'shared-solid-v2/styles'

function App() {
return Only Button
}
`

Components

$3

A flexible button component with multiple variants and sizes.

Props:
- variant?: 'primary' | 'secondary' | 'ghost' - Visual style (default: 'primary')
- size?: 'sm' | 'md' | 'lg' - Button size (default: 'md')
- disabled?: boolean - Whether the button is disabled
- onClick?: () => void - Click handler
- children: JSX.Element - Button content

Examples:
`tsx
alert('Clicked!')}>
Large Primary Button



Disabled Ghost Button

`

$3

A small status indicator component.

Props:
- color?: 'default' | 'success' | 'warning' | 'error' - Color scheme (default: 'default')
- size?: 'sm' | 'md' - Badge size (default: 'md')
- children: JSX.Element | string - Badge content

Examples:
`tsx
Active
Error State
`

Development

$3

Run Storybook to develop and document components:

`bash
npm run storybook
`

$3

The library supports two build modes:

1. Monolithic Build - Single library bundle
2. Modular Build - Individual component bundles

Both builds are optimized for treeshaking with proper sideEffects: false configuration.

$3

Tests are written with Vitest and Solid Testing Library:

`bash
npm test # Run all tests
npm run test:ui # Run tests with interactive UI
npm run test:coverage # Run tests with coverage report
``

Build Output

The build process generates:

- ES Modules (.js) for modern bundlers
- CommonJS (.cjs) for Node.js compatibility
- TypeScript Declarations (.d.ts) for type safety
- CSS Bundle with Tailwind utilities
- Component-specific bundles for modular imports

Configuration

- Tailwind CSS v3 with custom theme
- SCSS Modules for component-specific styling
- PostCSS for CSS processing
- TypeScript with strict mode enabled
- Vite for fast builds and HMR
- Storybook with SolidJS integration

License

MIT

---

Built with ❤️ using SolidJS, TypeScript, and Tailwind CSS