@silkrun/ui

React components and theme CSS for Silkrun apps.

Install

npm install @silkrun/ui react react-dom

Requires React 18.

Usage

Import the stylesheet once at your app's entry point, then import each component from its own path:

import '@silkrun/ui/styles.css'
import { Button } from '@silkrun/ui/button'
import { Dialog } from '@silkrun/ui/dialog'

export function App() {
  return <Button>Save</Button>
}

There is no root @silkrun/ui import. Per-component paths keep your bundle to the components you use.

The stylesheet is precompiled, so your app needs no Tailwind setup. Fonts are bundled and referenced by relative URL, so any bundler that handles CSS url() (Vite, webpack, Next.js) copies them for you.

Light and dark mode

Set data-theme on <html>:

<html data-theme="dark">

Components read the attribute and have no theme prop of their own. Without it, the light theme applies.

Components

accordion, account-menu, action-bar, action-sheet, alert, app-card, app-header, app-icon-status, avatar, badge, bottom-dock, breadcrumb, button, calendar, card, checkbox, checkbox-group, chip, code, command-dialog, context-menu, copy-field, corner-cluster, date-picker, descriptions, dialog, divider, dot, dropdown-menu, dynamic-island, empty-state, event-block, fab, field, file-drop, form, grid, heading, hover-actions, hover-card, icon, icon-button, image, image-grid, input, launchpad, lazy-load, list, markdown-text, media-viewer, message-row, messages, overlay, page-header, pagination, pane, pane-header, picker, popconfirm, popover, progress, radio-group, rich-text-input, row, row-group, scroll-area, search-trigger, segmented, select, settings-navigation, sheet, sidebar-app-identity, sidebar-nav, sidebar-screen, sidebar-shell, sidebar-user, skeleton, slider, smart-list, spinner, splitter, stack, stage-progress, surface, switch, tab-bar, table, tabs, tags-input, text, text-diff, textarea, time-picker, toaster, tool-use, tooltip, topbar-ghost, ui-provider, use-roving-focus, workspace-stage

Each name is its import path: @silkrun/ui/<name> (or @silkrun/ui/components/<name>). select also has @silkrun/ui/components/select/native-select, and @silkrun/ui/lib/cn is the class-name helper.

rich-text-input needs the Lexical packages, which are optional peers: install lexical and the @lexical/* packages listed in this package's peerDependencies if you use it.

License

MIT. Bundled fonts keep their own licenses: Noto Sans (Apache 2.0) and Roboto (SIL Open Font License 1.1), in theme/fonts/.