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

Get Started

PreviousNext

Add free shadcn/ui-compatible React components, blocks, and templates to your project — copy the source, or install with the shadcn CLI.

Byos gives you two ways to use a component: copy the source directly from its doc page, or install it with the shadcn CLI. Neither requires an account or a license key.

Prerequisites

Byos is built on React 18+ and . Set those up in your project before adding components.

Option 1: Copy the code

  1. Open the component's page under or browse the full catalog at .
  2. Click View code to see the full source, or Copy to copy it straight to your clipboard.
  3. Paste it into your project (e.g. components/ui/button.tsx) and adjust the import paths to match your folder structure.

Option 2: Install with the shadcn CLI

Add the Byos registry to your components.json:

{
  "registries": {
    "@byosui": "https://byosui.vercel.app/r/styles/{style}/{name}.json"
IntroductionStyling

On This Page

PrerequisitesOption 1: Copy the codeOption 2: Install with the shadcn CLIBlocks and templatesStylingBase UI and Radix UI Support
}
}

Then install any component by name:

pnpm dlx shadcn@latest add @byosui/c-button-10

See the guide for the full style/variant reference.

Blocks and templates

Beyond individual components, Byos includes free blocks (full page sections) and free templates (complete starting layouts), composed from the same component set — so anything you copy already matches the rest of your project.

Styling

Byos extends the standard Tailwind color tokens with additional semantic tokens for context-aware UI states (--info, --success, --warning, and more). See the to set these up.

Base UI and Radix UI Support

Every in-house primitive ships in two versions — one built on and one on — so you can pick whichever primitive library fits your project.

Tailwind CSS v4
Components
/components
Registry
Styling Guide
Base UI
Radix UI