Pinceau 
Make your
<script>lighter and your<style>smarter.
-
🦾 Typed Styling API inspired from the tools you already love
-
const Component = $styled.a<Props>({ ...componentStyle }) const className = styled({ ...scopedCss }) css({ ...globalCss })
-
-
🎨 Multi-layers Design Tokens compatible theme configuration
-
⚡ Plug & play support for any Vite-based framework
-
🪄 Comes with everything you need to build a robust design system
- Smart output engine that uses static CSS or CSSOM when you need it
- Style colocation
- Style composition
- Responsive variants API
- Theming and local tokens
- Runtime theme swapping
-
🧱 Fully modulable, let you disable every feature you do not need but needs no configuration to start
-
🌐 SSR-ready with optimized hydration and no JS/CSS style duplication
-
✅ 300+ tests covering every core packages and integrations
-
🍦 VSCode extension for DX Sugar
Pinceau v1 is currently in
⚠️ beta, feel free to report any feedback you may have in issues.
⚙️ Install
Vue
pnpm install @pinceau/vue// vite.config.ts
import Pinceau from '@pinceau/vue/plugin'
export default defineConfig({
plugins: [
Pinceau(),
...yourPlugins
],
})Example: examples/vite-vue/vite.config.ts
Svelte
pnpm install @pinceau/svelte// vite.config.ts
import Pinceau from '@pinceau/svelte/plugin'
export default defineConfig({
plugins: [
Pinceau(),
...yourPlugins
],
})Example: examples/vite-svelte/vite.config.ts
React
pnpm install @pinceau/react// vite.config.ts
import Pinceau from '@pinceau/react/plugin'
export default defineConfig({
plugins: [
Pinceau(),
...yourPlugins
],
})Example: examples/vite-react/vite.config.ts
Use our theme or create yours
Use our default theme, 🎨 Pigments:
// vite.config.ts
export default defineConfig({
plugins: [
Pinceau({
theme: {
layers: ['@pinceau/pigments']
}
})
]
})Or build your in theme.config.ts:
// theme.config.ts
import { defineTheme } from '@pinceau/theme'
export default defineTheme({
// Media queries
media: {
mobile: '(min-width: 320px)',
tablet: '(min-width: 768px)',
desktop: '(min-width: 1280px)'
},
// Some Design tokens
color: {
red: {
1: '#FCDFDA',
2: '#F48E7C',
3: '#ED4D31',
4: '#A0240E',
5: '#390D05',
},
green: {
1: '#CDF4E5',
2: '#9AE9CB',
3: '#36D397',
4: '#1B7D58',
5: '#072117',
}
},
space: {
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem'
}
// Utils properties
utils: {
px: (value: PropertyValue<'padding'>) => ({ paddingLeft: value, paddingRight: value }),
py: (value: PropertyValue<'padding'>) => ({ paddingTop: value, paddingBottom: value })
}
})Example: examples/theme/theme.config.ts
💖 Credits
This package takes a lot of inspiration from these amazing projects:
License
MIT License © 2022-PRESENT Yaël GUILLOUX
“All you need to paint is a few tools, a little instruction, and a vision in your mind.” • Bob Ross