@byline/ui
Framework-independent React primitives for Byline CMS, including buttons,
inputs, overlays, icons, and drag-and-drop components. CMS field widgets and
document-editor forms belong to @byline/admin.
This package is part of Byline CMS — a developer-friendly, open-source headless CMS with versioning, editorial workflow, and content translation as first-class concerns.
For documentation, the full architecture overview, and getting started instructions, see the main repository: https://github.com/Byline-CMS/bylinecms.dev.
Relationship to @infonomic/uikit
The foundational surface of this package — the components, icons, hooks,
lib, loaders, styles, utils, and widgets directories, plus uikit.ts
— is shared with @infonomic/uikit. The two
kits are kept in step by porting changes manually, in whichever direction a
change originates: a change made here is ported upstream, a change made
upstream is ported here. Either copy may be edited directly; neither is the sole
source of truth.
Byline's dnd/ components and react.ts entry point have no upstream counterpart.
Storybook
Storybook lets you inspect and interact with the UI primitives without starting
the CMS or a database. The stories are ported from the sibling UI kit and live
beside their components in src/**/*.stories.tsx.
After installing the workspace dependencies, run from the repository root:
pnpm storybook
Open http://localhost:6007. The preview includes the UI kit's reset, theme, typography, local fonts, drawer provider, and toast provider. Use the toolbar to switch between light and dark themes. The accessibility panel runs checks against the selected story; documentation pages and controls are also available.
Build a static site with:
pnpm build-storybook
The output is packages/ui/storybook-static/, which is ignored by Git.
Both commands also work with pnpm --filter @byline/ui before the command name.
Port 6007 matches the sibling kit; stop its server before starting this one, or
run pnpm --filter @byline/ui storybook --port 6008 to use a different port.
Configuration lives in .storybook/main.ts and .storybook/preview.tsx.
Static preview assets live in public/, with font licences beside the fonts.
The preview applies .byline-ui to the iframe body so portalled overlays inherit
the same scoped styles as the stories. Story layout uses inline styles and does
not require the web application's Tailwind configuration.
When adding a story, import components from their local source modules and
Storybook types from @storybook/react-vite. The package's typecheck command
checks stories and configuration; the library build excludes story modules.
Run the static build and inspect changed stories in the browser before merging.
License
MPL-2.0