Skip to content
Byos
ComponentsDocs
XFigma3.4k
Overview
  • Introduction
  • Get Started
  • Styling
  • Registry
  • Roadmap
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Data GridVirtualization and row pinning support added
  • Date Selector
  • Event Calendar
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Product

  • Components
  • Docs

Community

  • GitHub
  • X / Twitter
  • Figma

© 2026 Byos. Released under the MIT License.

3.4k

Registry

PreviousNext

Install free shadcn/ui-compatible components from the Byos registry with the shadcn CLI, or copy the source directly.

The Byos Registry uses a single @byosui namespace. The shadcn CLI resolves the full alias suffix into the registry URL, so you can install everything from one namespace.

@byosui is a registry namespace, not an npm scope

There is no Byos npm package to install. Running npm i @byosui/button pulls an unrelated publisher's package from npm's own @byosui scope, which is not ours. Byos items are installed only with the shadcn CLI, which resolves @byosui/<name> against the registry URL in your components.json.

Setup Byos Registry

Add the Byos registry namespace to your components.json. Learn more about registry config from .

{



StylingRoadmap

On This Page

Setup Byos RegistryStyle ValuesClass MergingInstalling ComponentsBlocks and TemplatesStyles
"registries"
: {
"@byosui": "https://byosui.vercel.app/r/styles/{style}/{name}.json"
}
}

Style Values

{style} is not free-form. The shadcn CLI substitutes it with the style value from your components.json, which Byos reads as <base>-<variant>: the base picks the primitive library the code is built on, the variant picks the visual style. Every pairing of the two lists below is served, so base-nova (the default), radix-lyra and base-sera are all valid. A {style} outside these lists is not served and the install fails as not found.

<base>Primitive library
baseBase UI
radixRadix UI
<variant>Look
vegaClean, neutral, and familiar
novaReduced padding and margins
maiaRounded, with generous spacing
lyraBoxy and sharp. For mono fonts
miraMade for compact interfaces
lumaFluid, luminous, and soft
seraEditorial and typographic
rheaLike Luma but compact

Class Merging

Byos items that merge classes use cn, a compiled drop-in for clsx plus tailwind-merge, imported as a package:

import { cn } from "cn"

The CLI installs it for you: any item that imports it lists cn in its dependencies, so shadcn add adds it to your package.json on the first such install and skips it after that.

This follows shadcn, which moved every component onto the package in its September 2026 cn release: one dependency instead of two, and no local helper to maintain.

To drop clsx and tailwind-merge from your own project, run the upstream migration:

pnpm dlx shadcn@latest migrate cn

If you had customized cn in @/lib/utils, rebuild it with createCn from cn/config.

Installing Components

Component examples use the c-* naming pattern and install with no license key or account:

pnpm dlx shadcn@latest add @byosui/c-alert-1

Some c-* items pull shared @byosui/* primitives such as @byosui/alert or @byosui/data-grid as registry dependencies. Those supporting files are resolved automatically, so installs keep working out of the box.

Blocks and Templates

Free blocks and free templates install the same way — every c-* block and every template section resolves through the same @byosui namespace, using the same style values above.

Styles

The registry ships every component in multiple styles. Set your preferred style in components.json (for example base-nova or radix-nova) and the CLI pulls the matching source.

shadcn registry docs