97 lines
2.5 KiB
Markdown
97 lines
2.5 KiB
Markdown
<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.**
|
||
|
||
Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## Install
|
||
|
||
Distributed via self-hosted git — install straight from the repo:
|
||
|
||
```bash
|
||
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:
|
||
|
||
```tsx
|
||
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>
|
||
);
|
||
}
|
||
```
|
||
|
||
- `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.
|
||
|
||
## 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
|
||
|
||
A live playground (every component on one page) runs via Rsbuild:
|
||
|
||
```bash
|
||
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.
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
|
||
brought to you by **ollyhearn** & **claude** with <3
|
||
|
||
</div>
|