bslib
Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5
bslib is an R package that provides a modern UI toolkit for building Shiny applications and R Markdown documents based on Bootstrap. It enables developers to create customizable dashboards and apply custom themes to their applications and documents.
The package offers reusable UI components like cards, value boxes, and sidebars that work across different contexts. It supports real-time interactive theming, allowing developers to preview and adjust app appearance on the fly. bslib provides access to modern Bootstrap versions and Bootswatch themes, going beyond the Bootstrap 3 default that Shiny and R Markdown currently use for backward compatibility.
Contributors#
Resources featuring bslib#
Company Branding Workflow Demo Live Q&A - February 26th
Hi, there! If you started here first, please refer back to the Demo: https://youtu.be/U48y0_yzEPY
This Q&A Session followed a workflow demo on “how to apply consistent company branding across reports, dashboards, and apps”
Key Links:
- GitHub Repo for Example: https://github.com/skaltman/brand-yml-demo
- brand.yml GitHub repo: https://posit-dev.github.io/brand-yml/
- Follow-along blog post: https://posit.co/blog/unified-branding-across-posit-tools-with-brand-yml/
Additional Resources Mentioned in Q&A:
- Quarto specific page on brand: https://quarto.org/docs/authoring/brand.html
- Typography: https://posit-dev.github.io/brand-yml/brand/typography.html
- brand.yml + pkgdown: https://github.com/rstudio/bslib/tree/main/pkgdown
- LLM brand.yml prompt: https://posit-dev.github.io/brand-yml/articles/llm-brand-yml-prompt/
- Inspiration/gallery: https://posit-dev.github.io/brand-yml/inspiration/
Please note, the main demo will be here: https://youtu.be/U48y0_yzEPY?feature=shared
If you’d like to ask questions anonymously, you can use: https://pos.it/demo-questions
Company-branded reports, apps, and dashboards made easier with brand.yml & Posit
You will learn: How to apply consistent company branding across reports, dashboards, and apps
Key Links:
- GitHub Repo for Example: https://github.com/skaltman/brand-yml-demo
- brand.yml GitHub repo: https://posit-dev.github.io/brand-yml/
- Follow-along blog post: https://posit.co/blog/unified-branding-across-posit-tools-with-brand-yml/
- Q&A after the Demo: https://youtube.com/live/kuEbRfmm4G4?feature=share
Additional Resources Mentioned in Q&A:
- Quarto specific page on brand: https://quarto.org/docs/authoring/brand.html
- Typography: https://posit-dev.github.io/brand-yml/brand/typography.html
- brand.yml + pkgdown: https://github.com/rstudio/bslib/tree/main/pkgdown
- LLM brand.yml prompt: https://posit-dev.github.io/brand-yml/articles/llm-brand-yml-prompt/
- Inspiration/gallery: https://posit-dev.github.io/brand-yml/inspiration/
Why we think this is important: Consistent company branding in your reports and apps (with your logo, colors, and fonts) can help make your work look more professional, but are often tricky to get right.
Common challenges we’ve heard from the community:
- Excessive manual effort: Applying colors, fonts, and logos across reports, apps, and dashboards takes time and is prone to errors.
- Difficult to update: When brand guidelines change, it’s difficult to update all products consistently.
- Team consistency: Ensuring all contributors follow branding guidelines is challenging to manage.
How to join future events: We host workflow demos the last Wednesday of every month. You can add them to your calendar with this link: https://www.addevent.com/event/Eg16505674
Full playlist of workflow demo recordings: https://www.youtube.com/playlist?list=PL9HYL-VRX0oRsUB5AgNMQuKuHPpNDLBVt
Have suggestions? Comment below.
Thank you for joining us!
Next Generation Shiny Apps with {bslib}
In this workshop, led by Garrick Aden-Buie, a software engineer for Shiny at Posit, you will learn how to build Shiny apps using modern user interfaces and layouts with bslib, the next generation of Shiny UI. Garrick will guide you through creating stylish and convenient dashboard layouts and components, demonstrating how bslib can effectively replace shinydashboard. Additionally, you will explore innovative techniques for deploying Shiny apps using shinylive, enabling the creation of static sites that run entirely in the user’s browser without the need for a Shiny server.
Main Sections
00:00 Introduction 11:00 Shiny 14:57 How bslib started 18:29 Theming from start to advanced 22:19 College Scorecard Data 39:24 bslib layouts 01:20:25 Advanced layouts 01:49:18 Filling Layouts 02:42:09 Details on demand 02:50:01 New inputs 02:53:15 Wrap up
More resources
R Validation Hub Site: https://www.pharmar.org/ Main Site: https://www.r-consortium.org/ News: https://www.r-consortium.org/news Blog: https://www.r-consortium.org/news/blog Join: https://www.r-consortium.org/about/join Twitter: https://twitter.com/rconsortium?lang=en LinkedIn: https://www.linkedin.com/company/r-consortium Mastodon: https://fosstodon.org/@RConsortium
How to write and deploy a Python web app with Shiny Express and Posit Team
Winston Chang at Posit joined us to share a quicker and simpler way of writing Shiny applications in Python, called Shiny Express
With Shiny Express you can create interactive data dashboards and data-driven applications faster than ever.
Helpful resources: ️ Introducing Shiny Express: https://shiny.posit.co/blog/posts/shiny-express/ ️ Shinylive: https://shinylive.io/py/examples/ ️ Component Gallery: https://shiny.posit.co/py/components/ ️ VS Code Shiny extension: https://marketplace.visualstudio.com/items?itemName=Posit.shiny-python ️ Q&A recording: https://youtube.com/live/zg4LP4lkihM?feature=share rsconnect-python package: https://pypi.org/project/rsconnect-python/
️ Follow-up links: Event Survey: https://forms.gle/8AcMAnjfPFSTQZJK6 Posit Team: https://posit.co/products/enterprise/team/ Request evaluation: pos.it/chat-with-us Posit Team demo resources: pos.it/demo-resources
What will you learn? If you’re new to Shiny → you’ll get started writing and deploying your first Shiny Express application in Python.
If you already know Shiny → you’ll see how Shiny Express can make your development experience quicker and more efficient.
Happy with the way things are? No need to change what you’re doing! We think of Shiny Express and Shiny Core as complementary, and intend to support both syntaxes indefinitely. Last month’s Workflow with Posit Team Demo featured Shiny in R and used bslib for custom theming, which you can check out here in the recording: https://youtu.be/O6WLERr5bKU?feature=shared
LIVE Q&A ROOM for ~11:30 am on Feb 28th: https://youtube.com/live/zg4LP4lkihM?feature=share
There is no need to register; join us here on YouTube at the time above or you can add to your calendar using the link below:
pos.it/team-demo
We host these Workflow Demos on the last Wednesday of every month, so you can use the link above to add the recurring event as well.
#python
How to bring modern UI to your Shiny apps
Looking for ways to make your Shiny apps a little…shinier?
Join Garrett Grolemund at Posit on Wednesday, January 31st at 11 am ET to learn how to theme and brand your own apps.
The session will highlight how to:
Layout an app with the bslib package (modern UI toolkit with no knowledge of CSS required) Add cards, value boxes, and logos Customize the theme of the app Tweak the theme by swapping out primary colors, secondary colors, and more. Quickly apply the theme to every plot in the app Work with bootstrap classes
Helpful Resources: ️ Code at : https://github.com/garrettgman/shiny-styling-demo bslib package: https://rstudio.github.io/bslib/ bsicons package: https://github.com/rstudio/bsicons ️ Bootstrap icons: https://icons.getbootstrap.com/ ️ Bootstrap CSS classes: https://bootstrapshuffle.com/classes thematic package: https://rstudio.github.io/thematic/ gitlink package: https://github.com/colearendt/gitlink
️ Follow-up links: Posit Team: https://posit.co/products/enterprise/team/ Request evaluation: pos.it/chat-with-us Posit Team demo resources: pos.it/demo-resources
LIVE Q&A ROOM for ~11:45 am on January 31st: https://youtube.com/live/1G8ZM6kbt8c?feature=share
There is no need to register; join us here on YouTube at the time above or you can add to your calendar using the link below:
pos.it/team-demo
We host these Workflow Demos on the last Wednesday of every month, so you can use the link above to add the recurring event as well
How to collaborate effectively with other data scientists (version control, project sharing, etc.)
Tis the season for joy and connection, and what better time to extend that collaborative spirit into your data science endeavors
By popular demand, our upcoming monthly workflow with Ryan Johnson on December 27th is dedicated to enhancing teamwork. It’s recorded, so no worries if you’re out! Or perhaps you’ll add us to the mix of holiday movies and watch from the couch!
This Month’s Focus: All Things Collaborative Working
Version control Git-backed deployment Project sharing
Date & Time: Wednesday, December 27th at 11 am ET.
Packages mentioned: Shiny: https://shiny.posit.co/ bslib: https://rstudio.github.io/bslib/
️ Follow-up links: Posit Team: https://posit.co/products/enterprise/ … Talk to us directly: pos.it/chat-with-us Posit Team demo resources: pos.it/demo-resources
There is no need to register; join us here on YouTube at the time above or you can add to your calendar using the link below:
pos.it/team-demo
We host these Workflow Demos on the last Wednesday of every month, so you can use the link above to add the recurring event as well.
We will use this thread on the Posit Community Forum for follow-up Q&A from this month’s session: https://community.rstudio.com/t/event-on-12-27-collaborative-workflows-w-posit-team-version-control-git-backed-deployment-project-sharing/179181 (shortlink: pos.it/workflow-dec-23)
Happy holidays! Cheers to 2024!
ShinyUiEditor: From Alpha to Powerful Shiny App Development Tool - posit::conf(2023)
Presented by Nick Strayer
Since its alpha debut at last year’s conference, the ShinyUiEditor has experienced continuous development, evolving into a powerful tool for crafting Shiny app UIs. Some key enhancements include the integration of new bslib components and the editor’s ability to create or navigate to existing server bindings for inputs and outputs.
In addition to new features, the editor is now available as a VSCode extension enabling it to integrate smoothly into more developers’ workflows. This talk will showcase how these new capabilities empower users to efficiently create visually appealing and production-ready applications with ease.
Presented at Posit Conference, between Sept 19-20 2023, Learn more at posit.co/conference.#
Talk Track: Shiny user interfaces. Session Code: TALK-1126
Small Package, Broad Impact: How I Discovered the Ultimate New Hire Hack - posit::conf(2023)
Presented by Trang Le
Onboarding new hires can be a challenging process, but taking a problem-focused approach can make it more meaningful and rewarding. In this talk, I will share how I discovered the ultimate new hire hack by creating two small packages that gave me the confidence I needed when I started at BMS. Through building these packages, I not only learned R things like using bslib and making font files available for published dashboards, but also gained a deep understanding of my company’s internal systems and workflows, and connected with my team via lots of questions. The resulting packages are still heavily used today.
Join me to discover how small packages can have a broad impact and what hiring managers can do to help.
Presented at Posit Conference, between Sept 19-20 2023, Learn more at posit.co/conference.#
Talk Track: Developing your skillset; building your career. Session Code: TALK-1112
Towards the Next Generation of Shiny UI
Presented by Carson Sievert
Create awesome looking and feature rich Shiny dashboards using the bslib R package.
Shiny recently celebrated its 10th birthday, and since its birth, has grown tremendously in many areas; however, a hello world Shiny app still looks roughly like it did 10 years ago. The bslib R package helps solve this problem making very easy to apply modern and customizable styling your Shiny apps, R Markdown / Quarto documents, and more. In addition, bslib also provides dashboard-focused UI components like expandable cards, value boxes, sidebar layouts, and more to help you create delightful Shiny dashboards.
Materials:
Presented at Posit Conference, between Sept 19-20 2023, Learn more at posit.co/conference.#
Talk Track: Shiny user interfaces. Session Code: TALK-1124
Data Science Hangout | Katie Schafer, Beam Dental | Building a Data Science Portfolio
We were recently joined by Katie Schafer, VP of Advanced Analytics at Beam Dental, to discuss the most important things going on with data science leadership.
Great tips & resources shared for this question: What can I do to be able to present my skills and build a portfolio if I’m not able to share my work?
Many people expressed that they are in this position.
Katie: Is it possible to simulate something akin to some of the data you would use? For project portfolios, submitting the actual work is not something that I’ve seen often.
In interviews, you need to be able to discuss the work. Describing the projects is really tough because you want to say something meaningful but you don’t want to be too specific. Having a role play conversation with yourself on questions you’re getting & practicing answers that are more generalized can be helpful. Take one specific problem, translate that to an abstract problem that you tackled with statistics and programming.
Javier: I’ve been in a similar boat. There’s a package called synthpop: https://lnkd.in/g_paFGNB , which helps take actual data points and simulates them to make a completely synthetic data set.
When I was interviewing for my job now I built a shiny app that I deployed to a free shinyapps.io. I styled the whole app to be consistent with their brand. I don’t attribute that alone to getting the job, but the interviewers were super impressed. The ability to change out the theme is so easy, so for anyone who’s trying to get a job this could be an easy way for you to have something that you can change whenever you interview with a new company.
Rick: If you’ve ever worked with a designer - they have a template and they’re not just creating everything from scratch. If you have a nicely organized project as a data scientist, you’re showing your skills as a software engineer.
Zac: I do a lot of personal projects because I don’t use R at work. For these projects I focus the topic on what skills I want to show off. I’m looking to start my career, so I write a blog & include reasons why I did something. I think this makes it a lot easier to share what I’ve done https://lnkd.in/gzhwuCqw
Libby: For me with portfolio work, it’s been difficult because sometimes my contributions are one algorithm inside a larger shared project, so I stick to descriptions, talking about what I did and why I did it, what the result was.
Larry: I describe the topic and present the deck. Sometimes I just make fake data, but talk about the steps I took.
Katie: Some of my richest connections have also come from speaking. R-Ladies has been a great starting point for that. A lot of meetups have gone virtual so you can now join a chapter even if you don’t have one in your city.
Jiwan: Maybe start with a 5 min lightning talk with a topic you’re excited about!
Other resources shared during the chat: Prabha: Technical debt in ML systems - https://proceedings.neurips.cc/paper/2015/file/86df7dcfd896fcaf2674f757a2463eba-Paper.pdf Rachael: R community explorer app: https://benubah.github.io/r-community-explorer/rugs.html Javier: GitHub for the {bslib} app, feel free to clone as you see fit: https://github.com/JavOrraca/bslib_demo_shiny
Jobs shared during the chat: Niklas: Several data science roles at my company (sustainability SaaS). 2 data engineers, 1 data analyst, 1 data scientist - https://higg.com/careers/ Jill: We are hiring for a Data Analyst role here at Viemed. We are a healthcare company and we LOVEEE DATA. https://viemed.apscareerportal.com/jobs/1338665/apps/new?embed=1"
Carson Sievert || Customizing Navigation Items in Shiny using {bslib} || RStudio
00:00 Introduction 00:15 Linking inside navbarPage 01:19 Replacing tabPanel with navbarPage, and navbarMenu 02:32 nav_spacer() 03:41 Adding header and//or footer content 04:07 Replacing tabsetPanel with navs_tab and navs_pill 04:32 navs_tab_card() and navs_pill_card() variants 04:40 Demo of all of the nav_*() functions
The bslib R package provides tools for customizing Bootstrap themes directly from R, making it much easier to customize the appearance of Shiny apps & R Markdown documents. bslib’s primary goals are:
- To make custom theming as easy as possible.
- Custom themes may even be created interactively in real-time.
- Also provide easy access to pre-packaged Bootswatch themes.
- Make upgrading from Bootstrap 3 to 4 (and beyond) as seamless as possible. (Shiny and R Markdown default to Bootstrap 3 and will continue to do so to avoid breaking legacy code.)
- Serve as a general foundation for Shiny and R Markdown extension packages. (Extensions such as flexdashboard, pkgdown, and bookdown already fully support bslib’s custom theming capabilities.)
You can read more about bslib here: https://rstudio.github.io/bslib/articles/bslib.html And you can learn more about Shiny here: https://shiny.rstudio.com/
Got questions? The RStudio Community site is a great place to get assistance: https://community.rstudio.com/
Content: Carson Sievert (@cpsievert) Design & editing: Jesse Mostipak (@kierisi)
Carson Sievert || Developing Shiny Custom Themes in Real Time Using {bslib}| RStudio
00:00 Introduction 00:09 The magic of bs_theme_preview() 01:43 The interactive widget provided by bs_theme_preview() 02:12 Using Bootswatch themes 02:57 Using the interactive widget to adjust your theme in real time 03:38 Integration with Google Fonts 04:22 Thematic is enabled in bs_theme_preview() 04:45 DT tables is enabled in bs_theme_preview() 05:30 Going from the interactive widget to your R code 07:03 Using interactive theming on your own Shiny app 09:01 Interactive theming with R Markdown documents
The bs_theme_preview() function launches an example shiny app via run_with_themer() and bs_theme_dependencies(). This is useful for getting a quick preview of the current theme setting as well as an interactive GUI for tweaking some of the main theme settings. Link to docs: https://rstudio.github.io/bslib/reference/bs_theme_preview.html
You can read more about the bslib package here: https://rstudio.github.io/bslib/ And you can learn more about Shiny here: https://shiny.rstudio.com/
Got questions? The RStudio Community site is a great place to get assistance: https://community.rstudio.com/
Content: Carson Sievert (@cpsievert) Design and editing: Jesse Mostipak (@kierisi)
Carson Sievert || Custom Theming with {bslib} in Shiny and R Markdown using bs_theme() || RStudio
00:00 Introduction 01:15 Jumping right in with the theme argument in Shiny 01:31 Shiny’s classic navbarPage using bs_theme() 01:46 Specifying your Bootstrap version 02:31 Using the theme argument in R Markdown 03:17 Custom theming in R Markdown using bs_theme() 04:10 bslib templates provided by RStudio 05:33 Review of common arguments for the theme parameter 08:47 Tips for working with dark themes 10:34 Introduction to the thematic package, which styles plots 12:04 How thematic handles fonts 13:09 Using fonts with bslib in R Markdown 14:36 Moving a theme from an R Markdown document into a Shiny app 16:51 Setting warnings for contrast ratios 18:42 A quick tour of Bootstrap 4 and Bootstrap 5 Sass variables 20:35 A quick overview of writing custom HTML in Shiny 22:15 How bslib automatically handles color contrast ratios
bs_theme() allows you to creates a Bootstrap theme object, where you can choose a (major) Bootstrap version, choose a Bootswatch theme (optional), customize main colors and fonts via explicitly named arguments (e.g., bg, fg, primary, etc), and customize other, lower-level, Bootstrap Sass variable defaults via ….
You can read more about the bslib package here: https://rstudio.github.io/bslib/ And you can learn more about Shiny here: https://shiny.rstudio.com/
Got questions? The RStudio Community site is a great place to get assistance: https://community.rstudio.com/
Content: Carson Sievert (@cpsievert) Design and editing: Jesse Mostipak (@kierisi)
Tom Mock & Shannon Haggerty | Theming Shiny and RMarkdown with {thematic} & {bslib} | RStudio
From rstudio::global(2021) Shiny X-Sessions, sponsored by Appsilon: this presentation covers the basics of how the thematic and bslib packages can be used to consistently style all the components of a shiny app at once.
About Tom Mock: Thomas is involved in the local and global data science community, serving as Outreach Coordinator for the Dallas R User Group, as a mentor for the R for Data Science Online Learning Community, as co-founder of #TidyTuesday, attending various Data Science and R-related conferences/meetups, and participated in Startup Weekend Fort Worth as a data scientist/entrepreneur.
About Shannon Haggerty: Shannon is on RStudio’s Customer Success team working with teams across the Life Sciences and Healthcare. In her free time, she likes to bake, hang out with her dogs, and explore new hobbies.
Learn more about the rstudio::global(2021) X-Sessions: https://blog.rstudio.com/2021/01/11/x-sessions-at-rstudio-global/
