sflorida-ui

A small personal design system — a cool "dusk" palette (indigo/violet), reusable CSS utilities, and a few React components. CSS-first and Tailwind v4 friendly; the utility classes also work without Tailwind.

Rename freely — change name in package.json (and the import paths) to whatever you like, e.g. a scoped @you/ui.

Install

pnpm add sflorida-ui

Assumes the consuming app uses Tailwind v4 (for the generated bg-* / text-* utilities). The .card / .glass / .glow-accent classes work even without it.

Use it

In your app's global stylesheet:

@import "tailwindcss";
@import "sflorida-ui/css";

That brings in the tokens (→ Tailwind @theme), the utility classes, and the bundled display font (Fraunces, self-hosted). React components:

import { Button, Card, Tag, Input, SegmentedControl } from "sflorida-ui";

<Card className="p-4">
  <Button>Save</Button>
  <Button variant="outline" size="sm">Cancel</Button>
</Card>

What's inside

Color tokens (light + dark via prefers-color-scheme) → Tailwind utilities: bg / fg / muted / card / border / accent / accent-fg / accent-soft / accent-ink. Rule of thumb: accent as a fill → bg-accent text-accent-fg; accent as text → text-accent-ink.

Utility classes: .card, .card-link (hover lift), .glass, .glass-nav, .site-header (scroll-aware), .glow-accent, .pill-track, .app-bg (ambient mesh), .grain, .anim-in, .press. Display font via the font-display utility / --font-display. All respect prefers-reduced-motion and prefers-reduced-transparency.

React components: Button (accent/outline/ghost), Card, Tag, Input, SegmentedControl.

Scroll-aware header

.site-header is transparent at the top and frosts on scroll. Add once:

<script>
  const f = () => document.documentElement.toggleAttribute("data-scrolled", scrollY > 8);
  f(); addEventListener("scroll", f, { passive: true });
</script>

Re-skin per app

Everything keys off CSS variables — override any in your app after the import to re-theme (e.g. keep a warm app warm):

@import "tailwindcss";
@import "sflorida-ui/css";
:root {
  --c-accent: #b8410f;      /* warm ember */
  --c-accent-ink: #8f3208;
  --c-glow: rgba(184, 65, 15, 0.35);
}

Publish

pnpm build          # builds the React lib (dist/) via tsup
npm login           # once
npm publish         # public; add --access public if scoped

Bump version (semver) for each release; consumers pnpm up sflorida-ui.