SolidJS Component Library (Design System) - Modular and treeshakeable component library with TypeScript, Tailwind CSS, and Storybook
npm install shared-dashboard-solidA modular and treeshakeable SolidJS component library built with TypeScript, Tailwind CSS, SCSS Modules, and Storybook.
- ✅ 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
This component library follows a systematic design system approach with:
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
``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
`
``
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
`bashDevelopment
npm run dev # Start Vite dev server
npm run storybook # Start Storybook on port 6006
Build Modes & Publishing
$3
Build and publish as a complete library:
`bash
Build stand-alone bundle
npm run build:standaloneOutput 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 (
Active
)
}
`$3
Build and publish each component separately for maximum treeshaking:
`bash
Build individual components
npm run build:individualOutput 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 publishFrom 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/stylesfunction App() {
return (
Only Badge
)
}
`$3
Build everything together for maximum flexibility:
`bash
Build all modes together
npm run build:allThis 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 (
Active
)
}
`$3
`tsx
import { Button } from 'shared-solid-v2/Button'
import 'shared-solid-v2/styles'function App() {
return
}
`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 contentExamples:
`tsx
`$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 contentExamples:
`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
``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
- 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
MIT
---
Built with ❤️ using SolidJS, TypeScript, and Tailwind CSS