@rfnry/ui

Shared Astro design system for rfnry products. Design tokens, CSS primitives (reset + prose), a small set of Astro components, and the client scripts that wire them up — consumed by @rfnry/docs and the rfnry admin panel.

Install

npm install @rfnry/ui astro

Requires Astro 6.

What's in the box

• CSS. tokens.css (color + spacing custom properties), reset.css (minimal normalize), prose.css (long-form content styles).
• Primitives. Icon, Button, Dropdown, ThemeToggle, SocialLinks, SocialLinksDropdown.
• Shells. Nav + NavNode (recursive sidebar), TOC, Header, Shell (full layout).
• Client scripts. dropdown.ts, theme.ts, toc.ts, mobile-sidebar.ts — small, self-contained modules a consumer can <script>-import where needed.
• Types + helpers. NavItem, itemContainsHref, Heading, SocialLink, SocialType re-exported from the package root.

Usage

Import the CSS in a layout, then drop components in.

---
import "@rfnry/ui/styles/tokens.css";
import "@rfnry/ui/styles/reset.css";
import Button from "@rfnry/ui/components/Button.astro";
---

<Button href="/start">Get started</Button>

Import a client script when a component needs it:

<script>
  import "@rfnry/ui/scripts/theme.ts";
</script>

See examples/showcase/ in the monorepo for a working reference that renders every primitive and shell.

Components

| Component | Purpose | |---|---| | Icon | Inline SVG with size + color inherited from the current text style | | Button | Single opinionated button variant; renders <a> when href is set, <button> otherwise | | Dropdown | Accessible disclosure with keyboard + outside-click handling (pairs with scripts/dropdown.ts) | | ThemeToggle | Dark/light/system dropdown (pairs with scripts/theme.ts) | | SocialLinks | Inline row of social icon links | | SocialLinksDropdown | Dropdown variant for tight headers | | Nav + NavNode | Recursive sidebar tree with auto-expansion of the active branch | | TOC | In-page table of contents with scroll-spy (pairs with scripts/toc.ts) | | Header | Site header shell: brand slot, center slot, right cluster | | Shell | Three-column layout: header, sidebar, content, optional TOC |

Exports

| Entry | Contents | |---|---| | @rfnry/ui | Type + helper re-exports (NavItem, itemContainsHref, Heading, SocialLink, SocialType) | | @rfnry/ui/components/* | .astro components | | @rfnry/ui/scripts/* | .ts client modules | | @rfnry/ui/lib/* | .ts helpers (nav, social, toc) | | @rfnry/ui/styles/tokens.css | Color + spacing custom properties | | @rfnry/ui/styles/reset.css | Minimal CSS reset | | @rfnry/ui/styles/prose.css | Long-form content styles |

Peer dependencies

• astro ^6.0.0

License

MIT