@sina-design-system/core
v0.0.7
Published
Sina — a minimal, tactile, glassy design system.
Readme
@sina-design-system/core
A minimal, tactile, transparent — slightly glassy — design system: --si-* design tokens (core +
semantic), styles, and React components. Thin outlines, subtle depth, background blur,
transparency-based interaction states, and a calm, harmonized palette.
Installation
Published publicly on npm — just install it, no registry config or token needed.
npm install @sina-design-system/core # or: pnpm add @sina-design-system/coreUsage
Import the stylesheet once at your app root, then import components:
import '@sina-design-system/core/styles.css'; // tokens + all component CSS — import once at the app root
import { Button, Input, Modal } from '@sina-design-system/core';
import { tokens } from '@sina-design-system/core'; // typed map of --si-* token names for JS / inline styles- All component styles ship in the one
styles.cssbundle. - Size-bearing controls (Button, Input, Select, choice controls) take a
sizeofsm/md/lg. - Interactive components use React hooks — in an RSC/Next.js app, import them inside a client component.
Dark mode
Toggle dark mode by setting data-theme="dark" on <html>, or rely on the system preference —
Sina honors prefers-color-scheme automatically when no theme is set. Set data-theme="light" on a
subtree to opt it back out of auto-dark.
Peer dependencies
Requires React 18 or 19 (react / react-dom).
Links
- Documentation & component playground: https://stritar.github.io/sina/
- Source: https://github.com/stritar/sina
License
MIT © Denis Stritar