What's New

🌁 Introducing the New Overlay Kit — A Seamless Way to Implement Overlays! ‍🌁

June 28, 2024

Release Banner 13 31 0

Our latest Overlay component provides depth and dynamic feel to otherwise flat page elements. From artfully containing overflowing content, to improving page readability, to directing your users' attention to important content and actions; our Overlays give you even more power to expertly control your users' experience.

13.31.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

New Kits:

Full Changelog


13.30.0

June 12, 2024

List of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

New Kits:

Full Changelog

Unlock Ultimate Customization with a Single Prop for All Chart Kits!

June 07, 2024

frame-3

Our latest addition simplifies customizations for all of our chart kits by allowing users to pass any settings accepted by Highcharts through a single prop. This enhancement ensures you have complete control over your chart’s appearance and behavior without the hassle of managing multiple properties or needing custom, 1-to-1 props to support your unique chart requirements.

13.29.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

New Kits:

Full Changelog

Level Up Your UI With Our NEW Dropdown Kit!

May 21, 2024

frame-288

Our new Dropdown kit was carefully crafted without third-party dependencies or config requirements to ensure ease of use. In fact, the only thing easier than implementing our dropdown is customizing it; custom triggers, multi-component options with complex layouts, custom displays for select options, and much more are easier done than said. Experience unparalleled customization with Playbook's meticulously crafted Dropdown kit!

13.28.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

⛰️ Elevate Your Avatars With Our Latest Component Overlays! ⛰️

May 06, 2024

variants

Customize your Avatars with our new, innovative component overlay feature. Seamlessly integrate essential information and interactive elements with an intuitive prop API to effortlessly enhance your Avatar kits.

13.27.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

New Kits:

Full Changelog

13.26.0

May 01, 2024

List of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

Upgrade Your Data Game: Explore the Enhanced Features of Bar Charts!

April 22, 2024

chart

Say hello to a whole new level of versatility! With our new updates, you can showcase negative values, stack data for clearer insights, and effortlessly integrate a secondary yAxis for comprehensive data representation—all in a single, dynamic graph. Elevate your data visualization game and unlock limitless possibilities with Playbook's enhanced Bar Chart. Here is what else we shipped with 13.25.0:

Kit Enhancements:

Fixed Bugs:

New Kits:

Improvements:

Full Changelog

🙌 Teamwork Makes the Dream Work 🙌

April 02, 2024

workinghard

We’ve been hard at work to ship requests from teams! To keep you up to date, our latest release, 13.23.0, is live in nitro-web, so keep an eye out for that.

In an effort to keep supporting all of you great developers, we're excited to announce that we shipped 2 feature requests to teams, as well as fixed 5 bugs! In addition to that, we have also made a huge improvement to our system by upgrading to rails 7.0.8.1.

Lastly, we're continuing to monitor and upgrade key parts of our system to keep Playbook up-to-date, so you can keep shipping great work!

13.23.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

🔨 Squashing Bugs, Enhancing Kits, and Introducing New Features! 🔨

March 27, 2024

bugs

We squashed a lot of bugs, and spruced up Playbook as a whole by upgrading to Ruby 3.3.0.
We're also proud to announce that we will be upgrading Rails to 7.0.8 in the next release. 🙌

13.22.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

New Kits:

Improvements:

Full Changelog

✨ Enhance Your UI Flexibility with Absolute Positioning in Global Props for Advanced Kit Layering ✨

March 18, 2024

5348fdac-67c3-4398-bb46-83f9dbc76c56

Take your UI design to the next level! Our latest update introduces absolute positioning in our global position props, empowering you to seamlessly arrange and layer kits. Great for intuitive status indication, notification placement, and overall enhanced user experience. 💅🎨

13.21.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

13.20.0

March 05, 2024

List of changes:

Kit Enhancements:

Fixed Bugs:

Full Changelog

🌳 Explore Data Depths with the New Advanced Table Component in Playbook!

February 27, 2024

13 9 Banner

Explore depths of nested data effortlessly. This latest addition to Playbook's design system brings clarity and control, transforming complex tables into intuitive insights.

13.19.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

13.18.0

February 17, 2024

List of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

13.17.0

February 2, 2024

List of changes:

New Kits:

Improvements:

Full Changelog

13.16.0

January 22, 2024

List of changes:

Fixed Bugs:

Improvements:

Full Changelog

13.15.0

January 5, 2024

List of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

Customize Your Calendar: Introducing Quick Pick Custom Ranges for Tailored Date Selection

December 19, 2023

Screen Recording 2023-12-18 at 03 43 42 PM

Say goodbye to generic date options! Quick Pick Custom Ranges is here, allowing you to define and label your own date presets or add personalized choices to our default selection.

13.14.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

13.13.0

December 8, 2023

List of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

Dynamically Control Your Tooltips!

November 22, 2023

13120

Gone are the days that a tooltip appears on its own. You can now control tooltips' visible state via props, so they are rendered conditionally. Text truncation? Data values? You have the power to dynamically display your Tooltips when and where you need them!

13.12.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

Multi Level Select with Customizable Radio Button Selectors!

November 13, 2023

multi-select-radio-3

Introducing the upgraded Multilevel component with customizable radio selectors🚀🌟 – now with a touch of tech magic! 🪄📻

Say goodbye to boring checkboxes and hello to snazzy radio buttons that let you pick just ONE option. Why? Because less is more!

📢🚨New Feature Alert! - Hide those unwanted radios from any tree node that's not in the mood to play. 🌳🎩💫

Level up your kit with some radio button charm and dynamic hide-and-seek.

13.11.1 full list of changes:

Kit Enhancements:

Improvements:

Full Changelog

13.10.0

October 19, 2023

List of changes:

Kit Enhancements:

Fixed Bugs:

  • Fixing Reaction Button Height Discrepancy and Changing Font Size #2793 (carloslimasd)

Improvements:

Full Changelog

13.9.0

October 5, 2023

List of changes:

Bugs:

Improvements:

The Unstyled Currency Kit Variant: Your Key to Dynamic Styling

September 23, 2023

13 8 0

Now, with a simple boolean prop and our versatile typography kits, your currency displays can effortlessly adapt to any style for a more flexible user experience!

13.8.0 full list of changes:

Kit Enhancements:

Improvements:

Full Changelog

🧠 Smart Multi-Line Truncation is Here!

September 22, 2023

13 7 0

Got text content that’s too long to fully display? No job’s too large for the new truncate prop. Pop it into the Body or Title kit, set the number of lines to truncate to, and your overflow text will… 👋

13.7.0 full list of changes:

Fixed Bugs:

Improvements:

  • Body and Title Truncate Docs + Prevent Class Name Clash #2750 (gavhuang)

Full Changelog

13.6.0

September 19, 2023

List of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

No More Custom CSS! The Global Text Align Prop is Here!

September 14, 2023

13 5 0

Gone are the days of adding custom CSS to align kits. With the global text-align prop, you can align any kit left, center, just by using textAlign=” ” as a prop!

13.5.0 full list of changes:

Improvements:

Full Changelog

✨New Unstyled Variant✨: More Style options for Date 📆, Time ⏰, and Timestamp⏱️ Kits!

September 12, 2023

13 4 0

In addition to the Date and Time kit, the Timestamp now also supports the 'unstyled' variant! The days of not having styled options for Date/Time kits are over. The new & improved Timestamp kit is now more flexible than ever with the ability to customize font sizes, weight, and color by wrapping the kit in any of our typography kits!

13.4.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

13.3.0

September 7, 2023

List of changes:

Kit Enhancements:

Improvements:

🤸 🎉 Collapsible, Flexible, Customizable: Introducing the New and Improved Nav Kit!

September 1, 2023

13 2 0

Nesting navigation is easy with the Nav kit's new Collapsible variant. And we didn't stop at a built-in collapsible feature, we refactored the Nav kit to make it more flexible overall! You can now use global props to customize text, spacing, and icons, making Nav kit design possibilities almost endless!

13.2.0 full list of changes:

Kit Enhancements:

Improvements:

Full Changelog

🚄 Playbook's On Track: Introducing the New File Upload for Rails ViewComponents! 📂

August 29, 2023

13 1 0

The File Upload kit for Rails ViewComponents redefines HTML's default input to match Playbook's aesthetics, ensuring consistency and elegance for every upload. 🚀📂🎉

13.1.0 full list of changes:

Fixed Bugs:

New Kits:

Full Changelog

💔 Say Goodbye to the Past: We're Breaking Up with moment.js! 🕒

August 22, 2023

13-0-0-banner

Say goodbye to the old and make way for the new as we bid adieu to moment.js in our Playbook design system! We've given our Date and Time kits a makeover, retiring the dated library in favor of a more vibrant and efficient solution. Our kits still handle dates and times flawlessly, but with the breakup, our bundle size has shed a whopping 25%, giving you a snappier experience.

13.0.0 full list of changes:

Breaking changes:

  • Remove Moment Packages and Update Date Picker's QuickPick Variants #2707 (gavhuang)

Full Changelog

Collapsible Kit ✨Enhancements✨: External Controls and Customizable Icons!

August 17, 2023

123900

Have a stack of collapsible sections and need a way to expand & collapse them all at once? You can now implement external controls like buttons to do just that! There’s more -- you can also pass custom icons like plus (‘+’) or minus (‘-’) if you don’t fancy chevrons.

12.39.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Full Changelog

12.38.0

August 15, 2023

List of changes:

Improvements:

Full Changelog

Text Fields Just Got Smarter!

August 9, 2023

12-37-0

Get better control over your forms with our new input_options prop on our Text Input kit! Set any HTML input option as a prop and have it effortlessly get passed down to the styled input!

12.37.0 full list of changes:

Kit Enhancements:

  • Groundwork for Upcoming Collapsible Nav Kit #2678 (nidaqg)

Fixed Bugs:

Improvements:

Full Changelog

12.36.0

August 4, 2023

List of changes:

Fixed Bugs:

Improvements:

Full Changelog

Tagging Made Easy! Say Hello to Seamless @mentions in Your Messages! 💬 👋

August 2, 2023

12 35 0

Highlight users dynamically within chats with our new Message kit subcomponent, @mentions! Choose 'user' (default, blue) or 'self' (yellow) variants for easy implementation and level up your chat experience!

12.35.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Full Changelog

Enhance Chat Engagement: Introducing the Reaction Button for Instant User Reactions!

July 28, 2023

12 34 0

The new Reaction Button variant and its delightful, dynamic UI is our latest enhancement to your users' chat experience! Watch as emoji use and interactions take center stage, making every conversation more immersive and enjoyable. Say goodbye to bland chats and let emotions shine through like never before!

12.34.0 full list of changes:

Kit Enhancements:

  • Reaction Button Variant for Button Kit #2658 (nidaqg)

Improvements:

Full Changelog

Get Ready to Hover: Introducing the Global Hover Prop!

July 21, 2023

12 33 0

Add some flair to your page by adjusting the shadow, scaling, or background color of elements when they’re being hovered over. The global hover prop is in beta now, and works with all kits. In particular, try it out with the Card, Button, or Message kit to add interactions to your page!

12.33.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

Full Changelog

Customize Your Toasts: Introducing 'Children' for Fixed Confirmation Toast Kit!

July 19, 2023

12 32 0

Level up your toasts with our latest feature – "Children" for Fixed Confirmation Toast Kit! 🚀 Now, web developers can fully customize Fixed Confirmation Toast contents by easily passing ‘children’, making it a breeze to add custom content like links to your toasts. Say goodbye to static toasts and say hello to interactive and engaging user experiences! 🎉

12.32.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Full Changelog

Responsive Design Made Easier: Introducing Responsive Titles!

July 13, 2023

12 31 0

Titles can now dynamically change based on screen size, making responsive design easier to implement. Try it out by passing multiple size values to the size prop!

12.31.0 full list of changes:

Kit Enhancements:

Full Changelog

Condensed Spacing for Data Heavy Tables

July 11, 2023

12-30-0

Sometimes tables can be very data heavy and users run out of room quickly. With the new default spacing in the first and last columns, there is more room in the table, allowing users to add more data!

12.30.1 full list of changes:

Kit Enhancements:

Fixed Bugs:

Improvements:

**Full Changelog

Introducing Quick Pick: Effortless Date Range Selection with the Enhanced Date Picker

July 6, 2023

12 29 0

A new Quick Pick variant now in DatePicker! This sleek and intuitive component provides a range of pre-defined date options, enhances user experience, and streamlines workflows.

12.29.0 full list of changes:

Kit Enhancements:

Full Changelog

Updated Phone Number Input: Easier Value Manipulation in React Forms

June 29, 2023

12 28 0

We’ve updated our PhoneNumberInput so that it’s more react-friendly. You can now pass a ref directly to the PhoneNumberInput kit, giving you more control over the input! This should make it much easier to manually clear the values when using with form libraries like formik, react-hook-form, or any form in general.

12.28.0 full list of changes:

Kit Enhancements:

Fixed Bugs:

Full Changelog

An Easier Way to Display Structured Data: The MultiLevelSelect kit!

June 28, 2023

12-27-0

We're excited to announce the release of our Multi Level Select kit for Rails and React. With this zero-dependency component, developers can easily add data to complex forms, bringing effortless navigation to any application.

12.27.0 full list of changes:

Kit Enhancements:

Improvements:

Full Changelog

Detail Kit Unleashed: Supercharge Data Display in Your UI

June 22, 2023

12-26-0

Need to display a wealth of information without cluttering your UI? Look no further than our brand-new Detail Kit! Designed specifically for showcasing hierarchical relationships of text and maintaining clarity in data-rich layouts, Detail is your go-to solution for tables, charts, and data-heavy UI.

12.26.1 full list of changes:

Kit Enhancements:

  • MultiLevelSelect Refactor to Remove Third Party Library #2578 (nidaqg)

New Kits:

Improvements:

Full Changelog

Styling typography just got easier!

June 9, 2023

12 25 0

Sometimes you don't need all the styles that ship with the Date kit.
We have added a simple boolean prop called "unstyled" that puts control in your hands.
You can now wrap our Date kit with any of our typography kits (Title, Body, Caption, etc) and the date kit will inherit that component's styles! 🎉

12.25.0 full list of changes:

Kit Enhancements:

Improvements:

🔍 Looking for something? See Our Release Archives