`@likec4/styles

Shared preset and generated styles for PandaCSS

Usage

pnpm add -D @likec4/styles @pandacss/dev

Configure your panda.config.ts:

import likec4preset from '@likec4/styles/preset'
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Whether to use css reset
  importMap: '@likec4/styles',
  presets: [
    likec4preset,
  ],
  jsxFramework: 'react',
  include: [
    './src/**/*.{js,jsx,ts,tsx}',
    // Include likec4 diagram source code to get the styles
    'node_modules/@likec4/diagram/panda.buildinfo.json',
  ],
})

TODO: configure PostCSS or use cli

Vite config:

import pandaCss from '@pandacss/dev/postcss'

//...
  css: {
    postcss: {
      plugins: [
        pandaCss(),
      ],
    },
  },

Getting help

We are always happy to help you get started:

• Join Discord community – it is the easiest way to get help
• GitHub Discussions – ask anything about the project or give feedback

Contributors

Become a contributor

Support development

LikeC4 is a MIT-licensed open source project with its ongoing development made possible entirely by your support.
If you like the project, please consider contributing financially to help grow and improve it.
You can support us via OpenCollective or GitHub Sponsors.

License

This project is released under the MIT License