Senko-san
106 lines
2.9 KiB
Markdown
106 lines
2.9 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
|
||
|
||
Add the registry to your project `.npmrc`:
|
||
|
||
```
|
||
@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/
|
||
```
|
||
|
||
Then install:
|
||
|
||
```bash
|
||
npm install @olly/@olly/modern-sk
|
||
```
|
||
|
||
`react` and `react-dom` (>=18) are peer dependencies — your app provides them.
|
||
|
||
## Usage
|
||
|
||
Import the stylesheet once at your app root, then use components anywhere:
|
||
|
||
```tsx
|
||
import '@olly/modern-sk/styles.css'; // required — tokens + components
|
||
import '@olly/modern-sk/fonts.css'; // optional — branded faces (see Fonts)
|
||
import { ThemeProvider, TooltipProvider, Button, Card } from '@olly/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
|
||
|
||
`@olly/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 '@olly/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
|
||
|
||
```bash
|
||
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.
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
|
||
brought to you by **ollyhearn** & **claude** with <3
|
||
|
||
</div>
|