shinyds - Designsystemet components for Shiny

R-CMD-check Codecov test coverage CRAN status CRAN downloads Designsystemet version
DOI shinyds status badge

shinyds brings Designsystemet — the Norwegian government’s shared design system — to Shiny. It provides ds_* R functions that produce accessible, consistently styled UI components following Norwegian public sector design guidelines.

Why shinyds?

Norwegian public sector applications are expected to follow Designsystemet’s guidelines for visual consistency and accessibility. shinyds means you don’t have to write CSS classes or HTML by hand: call ds_button(), ds_alert(), ds_tabs(), and the right markup, styles, and behaviour come with it. Components that carry Shiny reactivity return values through input$id just like native Shiny inputs.

Installation

From CRAN

install.packages("shinyds")

From GitHub

# install.packages("remotes")
remotes::install_github("novica/shinyds")

From R-Universe

install.packages('shinyds', repos = c('https://novica.r-universe.dev'))

Which version to install

[!NOTE] GitHub releases follow Designsystemet: a new shinyds release is published on GitHub shortly after each upstream release. The CRAN policy asks for updates no more than every 1–2 months, so only releases with breaking changes are submitted to CRAN. Install from GitHub to get the latest Designsystemet version.

Quick start

library(shiny)
library(bslib)
library(shinyds)

ui <- bslib::page_fluid(
  use_designsystemet(),
  ds_heading("Hello Designsystemet!", level = 1),
  ds_field(
    ds_label("Your name", `for` = "name"),
    ds_input("name", placeholder = "Enter your name")
  ),
  ds_button("Greet", inputId = "btn", variant = "primary"),
  uiOutput("greeting")
)

server <- function(input, output, session) {
  output$greeting <- renderUI({
    req(input$btn, input$name)
    ds_alert(paste("Hello,", input$name), variant = "success")
  })
}

shinyApp(ui, server)

use_designsystemet() must appear in the app’s UI — it loads the CSS and JavaScript and activates the design token color scheme.

Demo

Old Faithful

Example apps

Three example apps are bundled with the package:

App Description Run
basic Minimal contact form — button, text inputs, checkbox, reactive output shiny::runApp(system.file("examples/basic", package = "shinyds"))
faithful Old Faithful data explorer — tabs, sidebar, plot, table shiny::runApp(system.file("examples/faithful", package = "shinyds"))
showcase Full component reference with live reactive values shiny::runApp(system.file("examples/showcase", package = "shinyds"))

What’s included

shinyds covers the full Designsystemet component set: form controls (button, input, checkbox, radio, select, textarea, search, suggestion), layout (card, table, tabs, pagination), typography (heading, paragraph, link, list), and feedback (alert, badge, spinner, skeleton). Components compose naturally with bslib layout functions.

shinyds or shinyreact?

shinyreact (announcement) keeps Shiny on the server and hands the whole UI to a React client you write yourself. Paired with Designsystemet’s official React components, @digdir/designsystemet-react, it is another way to build Designsystemet apps on Shiny.

shinyds shinyreact + @digdir/designsystemet-react
UI written in R JavaScript / TypeScript (JSX)
Node.js toolchain Not needed Recommended
Works with bslib, htmlwidgets, modules, renderUI() Yes No — React owns the page
Adopt incrementally in an existing app Yes, one component at a time Requires rewriting the UI
Designsystemet layer CSS + web components React components

Use shinyds if you want to stay in R, add Designsystemet to an existing Shiny app, or keep the project free of a JavaScript build.

Use shinyreact if your team already works in React and the app needs custom layouts, heavy client-side interaction, or components beyond what Designsystemet and Shiny provide.

Learn more