WymaganiaLink do sekcji Wymagania
Node 26
Pakiet i jego build wymagają Node 26 lub nowszego.
Dostęp przez SSH
Konto GitHub z prawem odczytu do skribly/ui i klucz SSH dodany do tego konta.
React 19 i Tailwind 4
Tylko dla warstwy React. Czysty CSS nie potrzebuje żadnego z nich.
. ~/.nvm/nvm.sh && nvm use 26
ssh -T git@github.comInstalacja z gita przez SSHLink do sekcji Instalacja z gita przez SSH
Dodaj zależność z adresem git+ssh. Zakres semver wybiera najnowszy pasujący tag; dopóki pierwszy tag nie istnieje, użyj #main.
{
"dependencies": {
"@skribly/ui": "git+ssh://git@github.com/skribly/ui.git#semver:^0.1.0"
}
}npm installInformacja: Pakiet buduje się sam podczas instalacji
dist nie jest w repozytorium. Skrypt prepare go buduje, a npm 11 wypisuje ostrzeżenie o skryptach instalacji, choć build nadal się wykonuje. Do pracy lokalnej obok tego repozytorium file:../skriblyUI jest dowiązaniem, które nie uruchamia buildu, więc najpierw wykonaj npm install w bibliotece.Użycie w ReakcieLink do sekcji Użycie w Reakcie
1. Zaimportuj style
styles.css zawiera tokeny, mapowanie Tailwinda, domyślne style strony, klasy czystego CSS oraz @source, który pokazuje Tailwindowi zbudowane komponenty.
@import "tailwindcss";
@import "@skribly/ui/styles.css";2. Ustaw motyw przed pierwszym wyrenderowaniem
ThemeScript idzie pierwszy w head, więc zapisany motyw nocny nigdy nie błyśnie jasnym tłem. ThemeProvider zapamiętuje wybór i podąża za systemem, dopóki czytelnik nie wybierze motywu.
import { ThemeProvider, ThemeScript } from '@skribly/ui/theme'
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<ThemeScript />
</head>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}3. Użyj komponentu
Importuj z korzenia pakietu albo z jednej grupy, aby załadować tylko tę grupę. Każde widoczne słowo i każda nazwa dostępna jest propem.
import { Button } from '@skribly/ui/actions'
import { Badge } from '@skribly/ui/feedback'
<Button onPress={save}>{t('save')}</Button>
<Badge tone="ok">{t('status.done')}</Badge>Użycie z czystym CSSLink do sekcji Użycie z czystym CSS
Strony bez Reacta i bez Tailwinda, takie jak strona Astro albo pojedynczy plik HTML, importują plain.css. Wszystko leży w warstwach kaskady, więc własny CSS strony ma pierwszeństwo bez walki o specyficzność.
@import "@skribly/ui/plain.css";<button class="sk-button">Save</button>
<button class="sk-button sk-button--outline">Cancel</button>
<span class="sk-badge sk-badge--ok">Done</span>Każda klasa jest na stronie Czysty CSS.
FontyLink do sekcji Fonty
Biblioteka nazywa swoje fonty w tokenach i żadnego nie ładuje, więc każda aplikacja sama decyduje, skąd one pochodzą. Inter jest krojem interfejsu, JetBrains Mono krojem kodu, a Bricolage Grotesque krojem nagłówków. Każdy stos wraca do fontów systemowych.
<link rel="preconnect" href="https://fonts.bunny.net" />
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=bricolage-grotesque:600,700,800|inter:400,500,600,700|jetbrains-mono:400,500&display=swap" />Aa
Inter · --sk-font-sans
Aa
JetBrains Mono · --sk-font-mono
Aa
Bricolage Grotesque · --sk-font-display