Sheerly

A minimal, CSS-only component library.

Getting Started

Using React:

import "sheerly/lib/index.css";
import { Alert, AlertTitle, AlertDescription } from "sheerly";
export default function App() {
  return (
    <Alert data-variant="success" role="alert">
      <AlertTitle>Sheerly loaded!</AlertTitle>
      <AlertDescription>You are now using Sheerly!</AlertDescription>
    </Alert>
  );
}

Using plain HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sheerly</title>
    <link href="https://raw.esm.sh/sheerly/lib/index.css" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: var(--sheerly-background);
        color: var(--sheerly-foreground);
        font-family: var(--sheerly-font-sans);
      }
    </style>
  </head>
  <body>
    <div class="sheerly-alert" data-variant="success" role="alert">
      <div class="sheerly-alert-title">Sheerly loaded!</div>
      <div class="sheerly-alert-description">You are now using Sheerly!</div>
    </div>
  </body>
</html>