Tactile, dark-first React component library built on Radix primitives.
Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
Install
Distributed via self-hosted git — install straight from the repo:
npm i git+ssh://git@git.ollyhearn.ru:49239/olly/modern-sk.git
react and react-dom (>=18) are peer dependencies — your app provides them.
The package builds itself on install via the prepare script.
Usage
Import the stylesheet once at your app root, then use components anywhere:
import 'modern-sk/styles.css'; // required — tokens + components
import 'modern-sk/fonts.css'; // optional — branded faces (see Fonts)
import { ThemeProvider, TooltipProvider, Button, Card } from 'modern-sk';
export function App() {
return (
<ThemeProvider>
<TooltipProvider delayDuration={200}>
<Card>
<Button variant="primary">Click</Button>
</Card>
</TooltipProvider>
</ThemeProvider>
);
}
ThemeProvidermanages dark/light viadata-themeon<html>and persists tolocalStorage. Read it withuseTheme().TooltipProvidermust wrap any tree that uses<Tooltip>.- All visuals come from CSS custom properties in the shipped stylesheet.
Fonts
modern-sk/styles.css ships no fonts. The type tokens default to a chain
that degrades to system-ui, so the library works with zero font loading.
To get the branded ModernSK faces (Anta display + Onest + Geist Mono), import the optional stylesheet — Anta is self-hosted and inlined, no asset hosting needed:
import 'modern-sk/fonts.css';
To use your own fonts, skip fonts.css and override the tokens anywhere
after styles.css — every component re-reads them:
:root {
--font-display: 'Your Display', sans-serif;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
Develop
A live playground (every component on one page) runs via Rsbuild:
npm run dev # playground at http://localhost:3000
npm run build # build the publishable package into dist/
npm run lint
What ships
A git install exposes only dist/ — built ESM + CJS, .d.ts types,
styles.css, and fonts.css. The playground (src/App.tsx, Rsbuild config)
is dev-only and never published.
brought to you by ollyhearn & claude with <3