GUIDES

Start with one line of CSS.

You do not need to take the whole workshop home. Start with the layer your project needs: tokens for colors, React when interaction calls for it.

Install

Package-manager setup

pnpm add @moesegfault/style

React / TypeScript

Install react and react-dom 19+ first, load the CSS once at the application entry, then import components as needed.

import "@moesegfault/style/all.css";
import { Button, Notice } from "@moesegfault/style/react";

export function App() {
  return <Notice title="Hello"><Button>Continue</Button></Notice>;
}

Astro

Astro components emit static HTML by default and require no client-side JavaScript.

---
import "@moesegfault/style/all.css";
import Button from "@moesegfault/style/astro/Button.astro";
import Card from "@moesegfault/style/astro/Card.astro";
---
<Card><h2>Static first</h2><Button href="/start">Start</Button></Card>

Astro + React island

Add a client directive only to components that truly require interactivity.

---
import { Composer } from "../components/Composer";
---
<Composer client:visible />

Layered CSS

The all-in-one entry is easiest; size-sensitive applications can select layers explicitly.

@import "@moesegfault/style/tokens.css";
@import "@moesegfault/style/foundation.css";
@import "@moesegfault/style/components.css";

No build

Remote assets / native HTML

Pin a version in production. Default aliases suit prototypes, documentation previews, or controlled automatic updates.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://style.moesegfault.dev/v0.1.2/css/all.css">
  </head>
  <body class="moe-surface">
    <button class="moe-button">Start creating</button>
  </body>
</html>

Theme initialization

Set data-moe-theme before first-paint style calculation to avoid a theme flash; this documentation site uses that approach.

Markdown + TeX

Bring notes and equations along

Use the dedicated React rich-text entry so ordinary interactive components do not pull in the parser. Astro can render the same content into static HTML. Keep TeX delimiters intact with String.raw.

React

import "@moesegfault/style/all.css";
import { Markdown, Math } from "@moesegfault/style/react/rich-text";

const note = String.raw`## Notes

Euler: $e^{i\pi}+1=0$`;

<Markdown content={note} />;
<Math tex={String.raw`\sum_{k=1}^{n} k`} display />;

Astro

---
import Markdown from "@moesegfault/style/astro/Markdown.astro";
import Math from "@moesegfault/style/astro/Math.astro";
const note = "## Notes\n\nA little room to think.";
---
<Markdown content={note} />
<Math tex={String.raw`E = mc^2`} display />