@ferrlabs/ui-foundation
Framework-agnostic FerrLabs design foundation. Bundles together what was
previously three separate packages (@ferrlabs/ui-icons,
@ferrlabs/styles, @ferrlabs/ui-tailwind) so consumers install one
package instead of three. Tracked under UI#105.
What's in here
| Subpath | What | Used by |
|---|---|---|
@ferrlabs/ui-foundation/icons | SVG icon set as raw strings (Lucide-inspired stroke icons) | React + Astro |
@ferrlabs/ui-foundation/styles/global.css | Base stylesheet — fonts + Tailwind import + brand tokens | Every app's global.css |
@ferrlabs/ui-foundation/styles/tokens.css | Brand color + typography tokens (consumed via @theme) | apps/sites |
Usage
React app
import { icons, type IconName } from '@ferrlabs/ui-foundation/icons';
/* app/src/index.css */
@import '@ferrlabs/ui-foundation/styles/global.css';
Astro site
---
import { icons } from '@ferrlabs/ui-foundation/icons';
---
<div set:html={icons.shield} />
/* site/src/styles/global.css */
@import '@ferrlabs/ui-foundation/styles/global.css';
Radius tokens
| Token | Value | Tailwind utility | Use |
|---|---|---|---|
--radius-control | 4px | rounded-control | Buttons, inputs, selects, search, tabs, small chips |
--radius-card | 8px | rounded-card | Cards, menus, popovers, rail items |
--radius-modal | 12px | rounded-modal | Modals, switcher panels, large surfaces |
--radius-full | 999px | rounded-full | Switch, avatar, badges, status dots |
.btn-primary and .btn-ghost use --radius-control.
Migration from old packages
The old packages (@ferrlabs/ui-icons, @ferrlabs/styles,
@ferrlabs/ui-tailwind) keep working as re-export shells during the
transition window — change imports at your own pace. New consumers
should target @ferrlabs/ui-foundation directly.
License
Licensed under either of Apache-2.0 or MIT, at your option.
The Fraunces and DM Mono fonts are not covered by this license. They are pulled in through the @fontsource/fraunces and @fontsource/dm-mono dependencies and stay under the SIL Open Font License 1.1, whose text ships in each of those packages.