@olly/modern-sk (0.1.4-3)
Installation
@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/npm install @olly/modern-sk@0.1.4-3"@olly/modern-sk": "0.1.4-3"About this package
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+https://git.ollyhearn.ru/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
npm run dev # Rsbuild playground (every component on one page) at http://localhost:3000
npm run storybook # Storybook component explorer + docs at http://localhost:6006
npm run build # build the publishable package into dist/
npm run lint
Storybook is the component catalogue: each component has live controls and an
auto-generated prop table, plus a theme toggle in the toolbar. Stories live in
src/stories/*.stories.tsx; config is in .storybook/. It is committed to git so
anyone can npm run storybook and browse — but it never ships in the package.
What ships
A git install exposes only dist/ — built ESM + CJS, .d.ts types,
styles.css, and fonts.css. Everything else (src/App.tsx, .storybook/,
stories, Rsbuild config) is dev-only and never published.
brought to you by ollyhearn & claude with <3
Dependencies
Dependencies
| ID | Version |
|---|---|
| @phosphor-icons/react | ^2.1.10 |
| radix-ui | ^1.4.3 |
Development Dependencies
| ID | Version |
|---|---|
| @rsbuild/core | ^2.0.7 |
| @rsbuild/plugin-babel | ^1.2.0 |
| @rsbuild/plugin-react | ^2.0.0 |
| @rslint/core | ^0.5.1 |
| @storybook/addon-docs | ^10.4.1 |
| @types/react | ^19.2.15 |
| @types/react-dom | ^19.2.3 |
| babel-plugin-react-compiler | ^1.0.0 |
| esbuild | ^0.25.0 |
| prettier | ^3.8.3 |
| react | ^19.2.6 |
| react-dom | ^19.2.6 |
| storybook | ^10.4.1 |
| storybook-react-rsbuild | ^3.3.4 |
| tsup | ^8.5.0 |
| typescript | ^6.0.3 |
Peer Dependencies
| ID | Version |
|---|---|
| react | >=18 |
| react-dom | >=18 |