@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/.