{
  "id": "a7d34eb5ed5a87274117c72a",
  "source": "solid:signals",
  "type": "github-document",
  "title": "macaron",
  "content": "---\ntitle: Macaron\norder: 4\nmainNavExclude: true\nuse_cases: \u003e-\n  css-in-js styling, type-safe styles, styled components, variant-based styling,\n  compile-time css\ntags:\n  - styling\n  - css-in-js\n  - macaron\n  - styled-components\n  - typescript\n  - variants\nversion: '1.0'\ndescription: \u003e-\n  Style Solid components with Macaron's compile-time CSS-in-JS, offering\n  type-safe styled components and variant-based styling.\n---\n\n[Macaron](https://macaron.js.org/) is compile-time CSS-in-JS library that offers type safety.\n\n## Installation\n\n1. Install and set up the macaron plugin for your bundler:\n\n```package-install\n@macaron-css/core @macaron-css/solid\n```\n\n2. Within your `vite.config.js` folder, add the macaron plugin prior to other plugins:\n\n```js\nimport { macaronVitePlugin } from \"@macaron-css/vite\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [\n\t\tmacaronVitePlugin(),\n\t\t// other plugins\n\t],\n});\n```\n\n## Usage\n\n1. Import `styled` from `@macaron-css/solid` and create a styled component:\n\n```jsx\n// button.tsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {});\n```\n\n2. Add styles that will be applied to the components by default:\n\n```jsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {\n\tbase: {\n\t\tbackgroundColor: \"red\",\n\t\tborderRadius: \"10px\",\n\t},\n});\n```\n\nVariants can be added using the `variants` key:\n\n```jsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {\n\tbase: {\n\t\tbackgroundColor: \"red\",\n\t\tborderRadius: \"10px\",\n\t},\n\tvariants: {\n\t\tcolor: {\n\t\t\tviolet: {\n\t\t\t\tbackgroundColor: \"violet\",\n\t\t\t},\n\t\t\tgray: {\n\t\t\t\tbackgroundColor: \"gray\",\n\t\t\t},\n\t\t},\n\t},\n});\n```\n\nAdditionally, the `defaultVariants` feature is set to `variants` by default. This can be overridden at the time of usage:\n\n```jsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {\n\tbase: {\n\t\tbackgroundColor: \"red\",\n\t\tborderRadius: \"10px\",\n\t},\n\tvariants: {\n\t\tcolor: {\n\t\t\tviolet: {\n\t\t\t\tbackgroundColor: \"violet\",\n\t\t\t},\n\t\t\tgray: {\n\t\t\t\tbackgroundColor: \"gray\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolor: \"blue\",\n\t},\n});\n```\n\nThese components can be used like any other Solid component, with type-safe props derived from your variants.\nFor more information on how to use macaron, visit their [documentation](https://macaron.js.org/docs/installation/).",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/macaron.mdx",
  "metadata": {
    "path": "src/routes/guides/styling-components/macaron.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2376,
    "source_type": "github"
  },
  "hash": "f770b8698548422fbe0a3b0bb2bc6b977be8eb30bebe6b0285ed882ddb3bff56",
  "timestamp": "2026-02-23T11:43:00.188009051+01:00"
}