Introducing the new useClickToOpen prop in the Tooltip Kit, so now you can set the tooltip to open on click instead of just hover! Core dependencies in Playbook have also been updated with Vite now at 6.3.5 and Terser at 5.39.0—for improved build performance and optimization. Lastly, we've updated Rails from 7.0.8.1 to 7.1, bringing in the latest framework enhancements and security updates. Dependabot has nothing on us!
14.22.0 full list of changes:
Kit Enhancements:
Deprecated:
Fixed Bugs:
Improvements:
The spotlight’s on the Advanced Table Kit this release! Sleeker scrollbars, brand-new row-pinning logic, and a smoother selectable row experience - because wrangling big tables should feel slick, not sticky (unless you WANT sticky, in which case have you seen our sticky headers, sticky columns and sticky rows?)
14.21.2 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Our Dropdown kit now supports typeahead functionality and multi-select out of the box! Type to filter results instantly, click to select, and enjoy seamless keyboard navigation. Under the hood we handle hidden inputs, form resets, and custom events—so you can ship rich, accessible selection controls faster! Both our React and Rails kits are fully standalone, each encapsulating its own logic so you (and we) only have one version of the kit for each language to deal with/break/fall in love with.
14.20.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Playbook just got a little more magical! No data? No problem — we’ve got a new Empty State Kit for that! We also supercharged our Dropdown which now supports typeahead functionality in both React and Rails, making it faster to find what you need. The Draggable Kit too got a glow-up with new dropzone UI options. And yes, the DatePicker got smarter about ranges and quickpicks! It’s a glow-up all around!
14.19.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Deprecated:
Improvements:
This release brings the brand new Copy Button Kit that makes copy/pasting text super easy out-of-the-box! Also highlighted in this release are several major updates to the Table and the Advanced Table kits including sticky columns and extended expansion control for the Advanced Table and customizable headers for the Table Kit!
14.18.0 full list of changes:
Kit Enhancements:
Improvements:
Fixed Bugs:
We have done some spring cleaning and officially kicked Lodash to the curb, and swept out a bunch of bugs along the way! No more Lodash, fewer bugs, and a smoother ride!
14.17.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Our latest release introduces the ability to disable individual or parent options, validations for Rails, and React Hook Form support. We also made a few bug fixes for a smoother experience with the Multi Level Select in Rails forms!
14.16.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
The Rails Typeahead kit now supports dynamic option rendering, matching the React version! Previously, only React could update options in real-time using state—now, Rails can too, making search experiences more flexible and interactive. No breaking changes—just update to the latest version and enjoy a more dynamic Typeahead! 🎉
14.15.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kit:
We’ve fine-tuned the Overlay Kit to improve the horizontal scrolling experience! Previously, the scroll-end gradient indicators were always visible on both ends, even when users couldn’t scroll left—causing confusion. With the new 'dynamic' prop, gradients now appear only when there’s more content to scroll toward.
Enjoy the improved clarity! 🚀✨
14.14.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Deprecated:
We’ve just rolled out a fresh update to the Rails draggable component, making it simpler to use and quicker to integrate. With new, clearer doc examples, you’ll be up and running in no time.
14.13.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kit:
Selecting rows just got way easier! Our Advanced Table now lets you pick one or many with simple checkboxes. Batch actions? Handled. Less hassle? Guaranteed. Get clicking!
14.12.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kit:
Say goodbye to jarring page loads and hello to a smoother user experience! The new Skeleton Loading Kit provides a lightweight and customizable placeholder while your content loads. Perfect for lists, cards, or any UI component, it’s designed to keep users engaged and your app feeling snappy. Ready to level up your loading state game? Dive in today! 🚀
14.11.1 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
The Table Kit now supports sticky columns to ensure your essential table details are always in sight. Pair that with an easy-to-implement Pagination navigation bar, and you'll never get lost in the numbers again! Need to display more complex data? Our AdvancedTable kit now also supports seamless Pagination for an even smoother experience. 🚀
14.10.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Introducing a new way to set widths on components without using custom CSS! Available on every component, the width prop accepts Playbook spacing values as well as 0% and 100%.
14.9.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Now introducing the Draggable Kit for Rails! It’s easy to implement with a simple, flexible subcomponent structure right out of the box and works with almost any kit. Like its React counterpart, it’s fully customizable to fit your Rails project’s unique needs.
14.8.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
The Timeline kit now lets you swap in custom components, allowing clear, adaptable tracking for projects, processes, and user journeys. This enables your Timelines to be more informative and lets you adjust it to fit your needs!
14.7.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
We’re excited to announce a new level of flexibility for your tables! The Advanced Table now supports custom components within individual cells. Using the optional customRenderer in columnDefinition, you can access not only the current cell's value but also the entire row's data. This opens up powerful possibilities to render dynamic, tailored content in each cell with ease.
14.6.2 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
We’re back! 14.5.0 is live in Nitro and is packed with improvements, bug fixes and more!
This release focuses on continued improvements to usability, customization, and visual consistency!
14.5.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
We've added a fresh option to our MultipleUsersStacked component with the new bubble variant! This update showcases full user avatars in a sleek, Apple-inspired grid layout, enhancing recognition and clarity. It's a versatile addition to your toolkit, offering a refined way to display multiple users!
14.4.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Our Star Rating kit now shines brighter with added interactivity and hover effects! ⭐ And don’t forget to flip through content with our Pagination kit, now available in React in addition to Rails.
14.3.2 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
This release brings several enhancements and new kits aimed at improving user experience, customization, and visual clarity!
To make things easier on devs, Playbook now allows you to import our custom themes directly into your apps to style Highcharts charts. In this release, we also introduced different size options for form pills, offering more flexibility for you. We added a new form control for star ratings, provided a new error variant for badge notifications to bring clarity for error states, and added a loading state for buttons in the Dialog. Check out all the other great improvements in 14.2.1 here:
Kit Enhancements:
Fixed Bugs:
New Kits:
Improvements:
As always, we’ve been hard at work to bring you new features, bug fixes, and improvements that not only improves our platforms quality and usability but will help you create even better UI and experiences! Here’s everything that shipped on 14.1.0:
Kit Enhancements:
Fixed Bugs:
Improvements:
With 14.0.0, Playbook is now Vite-driven! This means that devs can continue to ship code faster and more efficiently, and it makes contributing to Playbook even easier! Additionally, our bundle size decreased by 24%! Enjoy this new, faster and more efficient Playbook experience!
14.0.0 full list of changes:
Improvements:
Customize icons effortlessly with the new color prop! 🎨 Apply any text, status, data, product, or category color with just a prop—no more custom CSS or text wrapping. Enjoy instant, hassle-free updates! 🚀🌟
13.34.1 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
Hey Rails devs! 🎉 Our Nav Kit just got an upgrade with a new tabbing variant! Now, you can navigate dynamic content like a pro. Dive in and let your content flow! 📚✨ Happy coding! 💻🎨
13.33.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
We are excited to introduce the new Draggable kit, a highly flexible solution for all your drag-and-drop needs! Use the simple subcomponent structure for greater flexibility or use the customized solutions for the List, Selectable List or Card kits for super easy implementation out of the box!
13.32.0 full list of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
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:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
New Kits:
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:
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:
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:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
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:
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:
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:
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:
List of changes:
Kit Enhancements:
Fixed Bugs:
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:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
List of changes:
New Kits:
Improvements:
List of changes:
Fixed Bugs:
Improvements:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
xxl As Max Width Value #2986 (israel-molestina)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:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
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:
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:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
List of changes:
Bugs:
Improvements:
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:
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:
List of changes:
Kit Enhancements:
Fixed Bugs:
Improvements:
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:
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:
List of changes:
Kit Enhancements:
Improvements:
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:
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:
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:
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:
List of changes:
Improvements:
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:
Fixed Bugs:
Improvements:
List of changes:
Fixed Bugs:
Improvements:
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:
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:
Improvements:
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:
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:
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:
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:
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:
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:
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:
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:
New Kits:
Improvements:
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:
