How-to guides

Task-oriented recipes for practitioners who already know what they want. Each page states the goal in one line, then gives the smallest path to it. For learning the framework end-to-end, start with the tutorial.

  • Author a custom theme: when the bundled light + dark themes don't match your brand and you need to ship a third one.
  • Override component variables: change padding, radius, selectors, or any !default knob without forking source.
  • Tree-shake to specific modules: ship only the components you use; drop everything else from your bundle.
  • Scope styles to a shadow root : re-target the framework's selectors so they apply inside a custom element without polluting the host page.
  • Author and publish a theme: ship a Krysalicss theme as an installable npm package — package shape, AA contrast verification, publish flow.
  • Readable body copy: tune line-height, max-width, and paragraph spacing for long-form prose against WCAG 1.4.12 (Text Spacing).
  • Use Krysalicss with Vite: install, import the SCSS entry, override variables, slice unused modules, and switch themes inside a Vite project.
  • Use Krysalicss with Next.js: App Router integration — root-layout SCSS import, Turbopack-compatible package exports, server-rendered theme bootstrap.
  • Use Krysalicss with Astro: drop the framework into an Astro layout, override knobs, slice modules, and add a no-flash theme toggle.