Components

Card

bc_card(
  bc_card_header(
    htmltools::h2("Production deploy"),
    htmltools::p("v1.4.2, 3m 12s"),
    bc_card_action(bc_badge("passed"))
  ),
  bc_card_body(htmltools::p("All 128 checks green.")),
  bc_card_footer(htmltools::p("Deployed just now."))
)

Scroll Area

bc_scroll_area(
  lapply(
    sprintf("v1.2.0-build.%03d", 1:40),
    function(tag) htmltools::div(class = "border-b py-2 text-sm", tag)
  ),
  class = "h-72 w-64 rounded-md border p-4",
  aria_label = "Builds"
)

Item

bc_item_group(
  bc_item(
    title = "Basic Item",
    description = "A simple item with title and description.",
    actions = bc_button("Action", variant = "outline", size = "sm"),
    variant = "outline"
  ),
  bc_item(
    title = "Visit our documentation",
    description = "Get started.",
    href = "#",
    variant = "outline"
  )
)

Empty

bc_empty(
  title = "No Projects Yet",
  description = "Create your first project to get started.",
  actions = bc_button("Create Project"),
  class = "border border-dashed"
)

Button

htmltools::tagList(
  bc_button("Save"),
  bc_button("Delete", variant = "destructive"),
  bc_button("Snooze", variant = "outline"),
  bc_button("Cancel", variant = "ghost")
)

Button Group

bc_button_group(
  bc_button("Copy", variant = "secondary", size = "sm"),
  bc_button_group_separator(),
  bc_button("Paste", variant = "secondary", size = "sm")
)

Dropdown Menu

bc_dropdown_menu(
  bc_dropdown_group(
    "My Account",
    bc_dropdown_item("Profile", shortcut = "CtrP"),
    bc_dropdown_item("Settings", shortcut = "CtrS")
  ),
  bc_dropdown_separator(),
  bc_dropdown_item("Log out")
)

Command

bc_command(
  bc_command_group("Suggestions", "Calendar", "Search Emoji"),
  bc_command_separator(),
  bc_command_item("Profile", shortcut = "CmdP")
)

Pagination

bc_pagination(
  bc_pagination_previous(),
  bc_pagination_item("1", href = "#"),
  bc_pagination_item("2", href = "#", current = TRUE),
  bc_pagination_item("3", href = "#"),
  bc_pagination_ellipsis(),
  bc_pagination_next()
)

Theme Switcher

bc_theme_switcher()

Field

bc_field_group(
  aria_label = "Account credentials",
  bc_input(
    id = "email-field",
    label = "Email",
    type = "email",
    description = "We never share your address."
  ),
  bc_field_separator(),
  bc_input(
    id = "password-field",
    label = "Password",
    type = "password"
  )
)

Label

bc_label(
  htmltools::tags$input(type = "checkbox", class = "input"),
  "Accept terms and conditions"
)

Input

bc_input(
  id = "email",
  label = "Email",
  type = "email",
  placeholder = "m@example.com",
  description = "Enter your email address."
)

Input Group

bc_input_group(
  bc_input(type = "search", placeholder = "Search...", aria_label = "Search"),
  bc_input_group_addon(bc_kbd("⌘K"), align = "end")
)

Textarea

bc_textarea(
  id = "message",
  label = "Message",
  placeholder = "Type your message here",
  description = "Write a short message."
)

Checkbox

bc_checkbox(
  "updates",
  "Email me updates",
  checked = TRUE,
  description = "Unsubscribe at any time."
)

Radio Group

bc_radio_group(
  name = "density",
  bc_radio("default", "Default"),
  bc_radio("comfortable", "Comfortable", checked = TRUE),
  bc_radio("compact", "Compact")
)

Switch

bc_switch(
  "focus-mode",
  "Share across devices",
  checked = TRUE,
  description = "Focus is shared across devices."
)

Slider

bc_slider(
  min = 0,
  max = 100,
  value = 50,
  label = "Temperature",
  description = "Adjust the temperature setting"
)

Select

bc_select(
  bc_select_option("light", "Light"),
  bc_select_option("dark", "Dark"),
  bc_select_option("system", "System"),
  placeholder = "Theme",
  name = "appearance",
  selected = "dark"
)

Native Select

bc_native_select(
  bc_native_select_option("Apple", value = "apple"),
  bc_native_select_option("Banana", value = "banana"),
  bc_native_select_option("Blueberry", value = "blueberry"),
  aria_label = "Fruit",
  placeholder = "Select a fruit"
)

Combobox

bc_combobox(
  "framework",
  bc_combobox_option("Next.js"),
  bc_combobox_option("SvelteKit"),
  bc_combobox_option("Remix"),
  placeholder = "Select a framework",
  class = "w-60"
)

Tabs

bc_tabs(
  bc_tab("Account details", label = "Account"),
  bc_tab("Password settings", label = "Password"),
  bc_tab("Not yet", label = "Billing", disabled = TRUE)
)

Breadcrumb

bc_breadcrumb(
  bc_breadcrumb_item("Home", href = "#"),
  bc_breadcrumb_item("Components", href = "#"),
  bc_breadcrumb_item("Breadcrumb", current = TRUE)
)

Sidebar

htmltools::div(
  style = "position:relative;height:24rem;overflow:hidden;transform:translateZ(0)",
  bc_sidebar(
    id = "sidebar",
    bc_sidebar_group(
      "Getting started",
      bc_sidebar_item("Playground", href = "#", aria_current = TRUE),
      bc_sidebar_item("Models", href = "#"),
      bc_sidebar_submenu(
        "Settings",
        bc_sidebar_item("General", href = "#"),
        bc_sidebar_item("Limits", href = "#")
      )
    ),
    bc_sidebar_separator(),
    bc_sidebar_group(
      "Account",
      bc_sidebar_item("Billing", href = "#")
    )
  )
)

Dialog

htmltools::tagList(
  bc_dialog_trigger("profile-dialog", class = "btn", "Edit profile"),
  bc_dialog(
    id = "profile-dialog",
    title = "Edit profile",
    description = "Make changes to your profile here.",
    content = bc_input(id = "name", label = "Name", value = "Pedro Duarte"),
    actions = htmltools::tagList(
      bc_dialog_close("Cancel", variant = "outline"),
      bc_dialog_close("Save changes")
    )
  )
)

Alert Dialog

bc_alert_dialog(
  title = "Are you absolutely sure?",
  description = "This cannot be undone.",
  confirm = list(label = "Delete", variant = "destructive"),
  trigger = "Delete Chat"
)

Drawer

bc_drawer(
  bc_switch(
    "cookies-essential",
    "Essential",
    checked = TRUE,
    disabled = TRUE,
    description = "Needed for the site to work. Always on."
  ),
  bc_switch(
    "cookies-analytics",
    "Analytics",
    description = "Counts visits so we know which pages earn their keep."
  ),
  bc_switch(
    "cookies-marketing",
    "Marketing",
    description = "Lets advertisers follow you between sites."
  ),
  title = "Cookies",
  description = "Choose what this site may store on your device.",
  trigger = "Cookie settings",
  actions = htmltools::tagList(
    bc_dialog_close("Reject non-essential", variant = "outline"),
    bc_dialog_close("Accept all")
  )
)

Popover

bc_popover(
  title = "Dimensions",
  description = "Set the dimensions for the layer."
)

Tooltip

bc_tooltip("Save", text = "Save your work")

Toast

htmltools::div(
  style = "position:relative;height:14rem;overflow:hidden;transform:translateZ(0)",
  bc_toaster(
    bc_toast(
      "Saved",
      description = "Your changes are in place.",
      category = "success",
      cancel = list(label = "Dismiss")
    ),
    bc_toast("Upload failed", category = "error", duration = -1)
  )
)

Alert

bc_alert(
  title = "Payment failed",
  description = "Check your card and try again.",
  action = bc_button("Retry", variant = "outline", size = "sm"),
  variant = "destructive"
)

Avatar

bc_avatar_group(
  bc_avatar(src = "https://github.com/shadcn.png", alt = "@shadcn", fallback = "CN"),
  bc_avatar(fallback = "LR"),
  count = "+3"
)

CN LR +3

Badge

bc_badge("stable")

Keyboard Key

bc_kbd("⌘K")

Progress

bc_progress(66, label = "Upload progress")

Skeleton

bc_skeleton(class = "h-4 w-full")

Spinner

bc_spinner(size = "6")

Accordion

bc_accordion(
  bc_accordion_item("First section", "First section content.", open = TRUE),
  bc_accordion_item("Second section", "Second section content.")
)