olly/modern-sk
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stuff

Browse Source
This commit is contained in:
ollyhearn
2026-05-31 16:47:52 +03:00
parent 01d41c2346
commit b6cf54c836
14 changed files with 444 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+50 -8
View File
@@ -1,14 +1,21 @@
# @modernsk/ui
<div align="center">
<img src="assets/logo.svg" alt="ModernSK" width="380" />
**Tactile, dark-first React component library built on [Radix](https://www.radix-ui.com/) primitives.**
Tactile, dark-first React component library built on [Radix](https://www.radix-ui.com/) primitives.
Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
</div>
---
## Install
Git-hosted (pin to a tag):
Distributed via self-hosted git — install straight from the repo:
```bash
npm install github:YOUR_ORG/modernsk-ui#v0.1.0
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.
@@ -19,8 +26,9 @@ The package builds itself on install via the `prepare` script.
Import the stylesheet once at your app root, then use components anywhere:
```tsx
import '@modernsk/ui/styles.css';
import { ThemeProvider, TooltipProvider, Button, Card } from '@modernsk/ui';
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 (
@@ -37,7 +45,31 @@ export function App() {
- `ThemeProvider` manages dark/light via `data-theme` on `<html>` and persists to `localStorage`. Read it with `useTheme()`.
- `TooltipProvider` must wrap any tree that uses `<Tooltip>`.
- All visuals come from CSS custom properties in the shipped stylesheet; the self-hosted display font is inlined, so no extra asset hosting is needed.
- 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:
```tsx
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:
```css
:root {
--font-display: 'Your Display', sans-serif;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
```
## Develop
@@ -51,4 +83,14 @@ npm run lint
## What ships
`npm publish` / git-install exposes only `dist/` — built ESM + CJS, `.d.ts` types, and `styles.css`. The playground (`src/App.tsx`, Rsbuild config) is dev-only and never published.
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.
---
<div align="center">
brought to you by **ollyhearn** & **claude** with &lt;3
</div>