basecoat

Bindings to the basecoat UI component library from R.

Basecoat is a pure tailwind css implementation of shadcn/ui that is the very same design system that powers ricochet.rs. Naturally, we’ve grown quite fond of it.

Every function is documented in the reference, and every component is drawn in the components article.

Installation

install.packages("basecoat")

Or the development version from GitHub:

pak::pak("ricochet-rs/basecoat")

Usage

{basecoat} is designed as an htmltools package that generates raw HTML with opt-in shiny binding.

It works for creating HTML templates or with server-side-rendering (SSR) with a framework like {plumber2} or {ambiorix} as well as an opt-in {shiny} integration.

Examples:

Basecoat is a framework agnostic package. These examples each build the same kind of page on a different stack, with HTMX and {htmxr} doing the swapping in the server rendered ones.

• {htmltools} static html sidebar
• {shiny} sidebar layout app
• {plumber2} + {htmxr} for HTMX + Server Side Rendered (SSR) website
• {nanonext} SSR website

Page Layouts

To help create full page applications, two page layout helps are shipped:

• bc_page_navbar()
• bc_page_sidebar()

For servers that answer with HTML text rather than tags, bc_page() writes the whole document as a string.

Shiny integration

{basecoat} ships an optional shiny integration. Because basecoat is not a shiny-only package, it must be opted into. Do this by calling bc_shiny_deps() inside your top level UI component (or frankly anywhere in your UI).

ui <- bc_page_navbar(
  bc_shiny_deps()
)

Below is an example of the bc_page_sidebar().

Open an example application file with:

tmp <- tempfile(fileext = ".R")
fp <- system.file("examples", "shiny-app.R", package = "basecoat")
file.copy(fp, tmp)

file.edit(tmp)

Custom themes

bc_theme_builder() can be used to launch a small html page to customize your own theme. Alternatively, you can use the theme customization in the package docs to help

bc_theme_builder()

The theme builder can be used with any tweakcn theme.

Copy the example tweakcn theme and paste it into the “Import” button to see how simple it is to customize your theme.

clipr::write_clip(
  brio::read_file(
    system.file(
      "examples/tweakcn-theme.css",
      package = "basecoat"
    )
  )
)

Importing themes

Set your theme by using the bc_deps() function. For SSR or normal htmltools usage, bc_deps() inside your top level UI component, for example here, it is bc_page_sidebar(). More on themes is in the theming article.

bc_page_sidebar(
  bc_deps(
    style = "lyra",
    theme = system.file(
      "examples/tweakcn-theme.css",
      package = "basecoat"
    )
  ),
  title = "Production",
  sidebar = bc_sidebar(id = "sidebar"),
  header = bc_theme_switcher(id = "switcher"),
  div(
    class = "max-w-sm p-4",
    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("All 128 checks green."),
      bc_card_footer("Deployed just now.")
    )
  )
)