gem.sh gem.sh
Home Gems Types Docs Community
  • Modules

    • module Playbook
    • module Playbook::AlignContent
    • module Playbook::AlignItems
    • module Playbook::AlignSelf
    • module Playbook::Classnames
    • module Playbook::Cursor
    • module Playbook::Display
    • module Playbook::Flex
    • module Playbook::FlexDirection
    • module Playbook::FlexGrow
    • module Playbook::FlexShrink
    • module Playbook::FlexWrap
    • module Playbook::Forms
    • module Playbook::JustifyContent
    • module Playbook::JustifySelf
    • module Playbook::LineHeight
    • module Playbook::Markdown
    • module Playbook::Markdown::Helper
    • module Playbook::NumberSpacing
    • module Playbook::Order
    • module Playbook::PbAvatar
    • module Playbook::PbAvatarActionButton
    • module Playbook::PbBackground
    • module Playbook::PbBadge
    • module Playbook::PbBarGraph
    • module Playbook::PbBody
    • module Playbook::PbBreadCrumbs
    • module Playbook::PbButton
    • module Playbook::PbButtonToolbar
    • module Playbook::PbCaption
    • module Playbook::PbCard
    • module Playbook::PbCheckbox
    • module Playbook::PbCircleChart
    • module Playbook::PbCircleIconButton
    • module Playbook::PbCollapsible
    • module Playbook::PbContact
    • module Playbook::PbCurrency
    • module Playbook::PbDashboardValue
    • module Playbook::PbDate
    • module Playbook::PbDatePicker
    • module Playbook::PbDateRangeInline
    • module Playbook::PbDateRangeStacked
    • module Playbook::PbDateStacked
    • module Playbook::PbDateTime
    • module Playbook::PbDateTimeStacked
    • module Playbook::PbDateYearStacked
    • module Playbook::PbDialog
    • module Playbook::PbDistributionBar
    • module Playbook::PbDocHelper
    • module Playbook::PbDocs
    • module Playbook::PbFilter
    • module Playbook::PbFixedConfirmationToast
    • module Playbook::PbFlex
    • module Playbook::PbForm
    • module Playbook::PbFormGroup
    • module Playbook::PbFormPill
    • module Playbook::PbFormsHelper
    • module Playbook::PbGauge
    • module Playbook::PbHashtag
    • module Playbook::PbHighlight
    • module Playbook::PbHomeAddressStreet
    • module Playbook::PbIcon
    • module Playbook::PbIconCircle
    • module Playbook::PbIconStatValue
    • module Playbook::PbIconValue
    • module Playbook::PbImage
    • module Playbook::PbKit
    • module Playbook::PbKitHelper
    • module Playbook::PbLabelPill
    • module Playbook::PbLabelValue
    • module Playbook::PbLayout
    • module Playbook::PbLegend
    • module Playbook::PbLineGraph
    • module Playbook::PbList
    • module Playbook::PbLoadingInline
    • module Playbook::PbMessage
    • module Playbook::PbMultipleUsers
    • module Playbook::PbMultipleUsersStacked
    • module Playbook::PbNav
    • module Playbook::PbOnlineStatus
    • module Playbook::PbPassphrase
    • module Playbook::PbPerson
    • module Playbook::PbPersonContact
    • module Playbook::PbPill
    • module Playbook::PbPopover
    • module Playbook::PbProgressPills
    • module Playbook::PbProgressSimple
    • module Playbook::PbProgressStep
    • module Playbook::PbRadio
    • module Playbook::PbRichTextEditor
    • module Playbook::PbSectionSeparator
    • module Playbook::PbSelect
    • module Playbook::PbSelectableCard
    • module Playbook::PbSelectableCardIcon
    • module Playbook::PbSelectableIcon
    • module Playbook::PbSelectableList
    • module Playbook::PbSource
    • module Playbook::PbStarRating
    • module Playbook::PbStatChange
    • module Playbook::PbStatValue
    • module Playbook::PbTable
    • module Playbook::PbTextInput
    • module Playbook::PbTextarea
    • module Playbook::PbTime
    • module Playbook::PbTimeRangeInline
    • module Playbook::PbTimeStacked
    • module Playbook::PbTimeline
    • module Playbook::PbTimestamp
    • module Playbook::PbTitle
    • module Playbook::PbTitleCount
    • module Playbook::PbTitleDetail
    • module Playbook::PbToggle
    • module Playbook::PbTooltip
    • module Playbook::PbTreemapChart
    • module Playbook::PbTypeahead
    • module Playbook::PbUser
    • module Playbook::PbUserBadge
    • module Playbook::PbWeekdayStacked
    • module Playbook::Props
    • module Playbook::Shadow
    • module Playbook::Spacing
    • module Playbook::ZIndex
  • Classes

    • class Playbook::ConflictingPropsError
    • class Playbook::Engine
    • class Playbook::Forms::Builder
    • class Playbook::Forms::Builder::ActionArea
    • class Playbook::Forms::Builder::FormFieldBuilder
    • class Playbook::KitBase
    • class Playbook::KitResolver
    • class Playbook::Markdown::HTML
    • class Playbook::Markdown::HTMLBlockCode
    • class Playbook::Markdown::HTMLWithPants
    • class Playbook::Markdown::TemplateHandler
    • class Playbook::MissingPropError
    • class Playbook::PbAvatar::Avatar
    • class Playbook::PbAvatarActionButton::AvatarActionButton
    • class Playbook::PbBackground::Background
    • class Playbook::PbBadge::Badge
    • class Playbook::PbBarGraph::BarGraph
    • class Playbook::PbBody::Body
    • class Playbook::PbBreadCrumbs::BreadCrumbItem
    • class Playbook::PbBreadCrumbs::BreadCrumbs
    • class Playbook::PbButton::Button
    • class Playbook::PbButtonToolbar::ButtonToolbar
    • class Playbook::PbCaption::Caption
    • class Playbook::PbCard::Card
    • class Playbook::PbCard::CardBody
    • class Playbook::PbCard::CardHeader
    • class Playbook::PbCheckbox::Checkbox
    • class Playbook::PbCircleChart::CircleChart
    • class Playbook::PbCircleIconButton::CircleIconButton
    • class Playbook::PbCollapsible::Collapsible
    • class Playbook::PbCollapsible::CollapsibleContent
    • class Playbook::PbCollapsible::CollapsibleMain
    • class Playbook::PbContact::Contact
    • class Playbook::PbCurrency::Currency
    • class Playbook::PbDashboardValue::DashboardValue
    • class Playbook::PbDate::Date
    • class Playbook::PbDatePicker::DatePicker
    • class Playbook::PbDateRangeInline::DateRangeInline
    • class Playbook::PbDateRangeStacked::DateRangeStacked
    • class Playbook::PbDateStacked::DateStacked
    • class Playbook::PbDateTime::DateTime
    • class Playbook::PbDateTimeStacked::DateTimeStacked
    • class Playbook::PbDateYearStacked::DateYearStacked
    • class Playbook::PbDialog::Dialog
    • class Playbook::PbDialog::DialogBody
    • class Playbook::PbDialog::DialogFooter
    • class Playbook::PbDialog::DialogHeader
    • class Playbook::PbDistributionBar::DistributionBar
    • class Playbook::PbDocs::KitApi
    • class Playbook::PbDocs::KitExample
    • class Playbook::PbFilter::Filter
    • class Playbook::PbFixedConfirmationToast::FixedConfirmationToast
    • class Playbook::PbFlex::Flex
    • class Playbook::PbFlex::FlexItem
    • class Playbook::PbForm::Form
    • class Playbook::PbFormGroup::FormGroup
    • class Playbook::PbFormPill::FormPill
    • class Playbook::PbGauge::Gauge
    • class Playbook::PbHashtag::Hashtag
    • class Playbook::PbHighlight::Highlight
    • class Playbook::PbHomeAddressStreet::CityEmphasis
    • class Playbook::PbHomeAddressStreet::HomeAddressStreet
    • class Playbook::PbHomeAddressStreet::StreetEmphasis
    • class Playbook::PbIcon::Icon
    • class Playbook::PbIconCircle::IconCircle
    • class Playbook::PbIconStatValue::IconStatValue
    • class Playbook::PbIconValue::IconValue
    • class Playbook::PbImage::Image
    • class Playbook::PbKit::PbDateTime
    • class Playbook::PbLabelPill::LabelPill
    • class Playbook::PbLabelValue::LabelValue
    • class Playbook::PbLayout::Body
    • class Playbook::PbLayout::Footer
    • class Playbook::PbLayout::Header
    • class Playbook::PbLayout::Item
    • class Playbook::PbLayout::Layout
    • class Playbook::PbLayout::Sidebar
    • class Playbook::PbLegend::Legend
    • class Playbook::PbLineGraph::LineGraph
    • class Playbook::PbList::Item
    • class Playbook::PbList::List
    • class Playbook::PbLoadingInline::LoadingInline
    • class Playbook::PbMessage::Message
    • class Playbook::PbMultipleUsers::MultipleUsers
    • class Playbook::PbMultipleUsersStacked::MultipleUsersStacked
    • class Playbook::PbNav::Item
    • class Playbook::PbNav::Nav
    • class Playbook::PbOnlineStatus::OnlineStatus
    • class Playbook::PbPassphrase::Passphrase
    • class Playbook::PbPerson::Person
    • class Playbook::PbPersonContact::PersonContact
    • class Playbook::PbPill::Pill
    • class Playbook::PbPopover::Popover
    • class Playbook::PbProgressPills::ProgressPills
    • class Playbook::PbProgressSimple::ProgressSimple
    • class Playbook::PbProgressSimple::ProgressSimple::ProgressError
    • class Playbook::PbProgressStep::ProgressStep
    • class Playbook::PbProgressStep::ProgressStepItem
    • class Playbook::PbRadio::Radio
    • class Playbook::PbRichTextEditor::RichTextEditor
    • class Playbook::PbSectionSeparator::SectionSeparator
    • class Playbook::PbSelect::Select
    • class Playbook::PbSelectableCard::SelectableCard
    • class Playbook::PbSelectableCardIcon::SelectableCardIcon
    • class Playbook::PbSelectableIcon::SelectableIcon
    • class Playbook::PbSelectableList::SelectableList
    • class Playbook::PbSelectableList::SelectableListItem
    • class Playbook::PbSource::Source
    • class Playbook::PbStarRating::StarRating
    • class Playbook::PbStatChange::StatChange
    • class Playbook::PbStatValue::StatValue
    • class Playbook::PbTable::Table
    • class Playbook::PbTable::TableRow
    • class Playbook::PbTextInput::AddOn
    • class Playbook::PbTextInput::TextInput
    • class Playbook::PbTextarea::Textarea
    • class Playbook::PbTime::Time
    • class Playbook::PbTimeRangeInline::TimeRangeInline
    • class Playbook::PbTimeStacked::TimeStacked
    • class Playbook::PbTimeline::Item
    • class Playbook::PbTimeline::Timeline
    • class Playbook::PbTimestamp::Timestamp
    • class Playbook::PbTitle::Title
    • class Playbook::PbTitleCount::TitleCount
    • class Playbook::PbTitleDetail::TitleDetail
    • class Playbook::PbToggle::Toggle
    • class Playbook::PbTooltip::Tooltip
    • class Playbook::PbTreemapChart::TreemapChart
    • class Playbook::PbTypeahead::Typeahead
    • class Playbook::PbUser::User
    • class Playbook::PbUserBadge::UserBadge
    • class Playbook::PbWeekdayStacked::WeekdayStacked
    • class Playbook::Props::Array
    • class Playbook::Props::Base
    • class Playbook::Props::Boolean
    • class Playbook::Props::Date
    • class Playbook::Props::Enum
    • class Playbook::Props::Error
    • class Playbook::Props::Hash
    • class Playbook::Props::HashArray
    • class Playbook::Props::NestedProps
    • class Playbook::Props::Number
    • class Playbook::Props::NumberArray
    • class Playbook::Props::Numeric
    • class Playbook::Props::Percentage
    • class Playbook::Props::Proc
    • class Playbook::Props::String
    Overview
    H
    Home
    R
    Reference
    T
    Types
    C
    Changelogs
  • Documentation
    • README
    • Avatar no image
    • Avatar status
    • Description
    • Footer
    • Background category
    • Background image
    • Background size
    • Background status
    • Background status subtle
    • Description
    • Description
    • Bar graph colors
    • Bar graph legend position
    • Bar graph spline
    • Description
    • Body light
    • Description
    • Footer
    • Description
    • Button block content
    • Button default
    • Button full width
    • Button icon options
    • Button loading
    • Button size
    • Footer
    • Description
    • Caption colors
    • Description
    • Footer
    • Card background
    • Card border none
    • Card border radius
    • Card header
    • Card highlight
    • Card light
    • Description
    • Circle chart colors
    • Circle chart legend position
    • Description
    • Footer
    • Collapsible color
    • Collapsible size
    • Description
    • Description
    • Description
    • Date timezone
    • Description
    • Date picker default date
    • Date picker format
    • Date picker hooks
    • Date picker input
    • Date picker label
    • Date picker month and year
    • Date picker on change
    • Date picker positions
    • Date picker time
    • Date picker week
    • Date picker year range
    • Description
    • Description
    • Description
    • Footer
    • Description
    • Date year stacked default
    • Description
    • Footer
    • Dialog compound components
    • Dialog default
    • Dialog full height
    • Dialog full height placement
    • Dialog scrollable
    • Dialog separators
    • Dialog should close on overlay
    • Dialog stacked alert
    • Dialog status
    • Description
    • Distribution bar custom colors
    • Description
    • File upload custom description
    • Description
    • Filter max width
    • Filter no background
    • Filter no sort
    • Filter placement
    • Description
    • Fixed confirmation toast multi line
    • Description
    • Flex align
    • Flex default
    • Flex gap
    • Flex inline
    • Flex item
    • Flex item align self
    • Flex item example
    • Flex justify
    • Flex reverse
    • Flex spacing
    • Flex wrap
    • Description
    • Footer
    • Form form with validate
    • Form group full width
    • Form pill example
    • Gauge colors
    • Gauge complex
    • Gauge min max
    • Gauge sizing
    • Description
    • Footer
    • Hashtag link
    • Description
    • Footer
    • Description
    • Footer
    • Home address street default
    • Home address street emphasis
    • Home address street link
    • Description
    • Footer
    • Icon animate
    • Icon custom
    • Icon pull
    • Description
    • Footer
    • Icon circle color
    • Description
    • Description
    • Transition image
    • Description
    • Footer
    • Label pill default
    • Description
    • Footer
    • Label value default
    • Label value details
    • Description
    • Layout collection
    • Layout collection detail
    • Description
    • Footer
    • Legend colors
    • Legend custom colors
    • Description
    • Lightbox compound component
    • Lightbox custom header
    • Lightbox default
    • Lightbox multiple
    • Description
    • Line graph colors
    • Line graph legend position
    • Description
    • Description
    • Description
    • Footer
    • Message default
    • Description
    • Multiple users size
    • Description
    • Description
    • With img nav
    • Description
    • Passphrase breached
    • Passphrase common
    • Passphrase input props
    • Passphrase meter settings
    • Passphrase strength change
    • Passphrase tips
    • Description
    • Footer
    • Person default
    • Description
    • Footer
    • Description
    • Pill example
    • Description
    • Popover list
    • Description
    • Description
    • Footer
    • Progress simple variants
    • Description
    • Description
    • Footer
    • Radio error
    • Description
    • Footer
    • Description
    • Footer
    • Select error
    • Description
    • Footer
    • Selectable card block
    • Selectable card default
    • Selectable card image
    • Selectable card input
    • Selectable card single select
    • Description
    • Description
    • Description
    • Stat change unit two
    • Description
    • Footer
    • Stat value default
    • Stat value precision
    • Description
    • Table action middle
    • Table alignment column
    • Table alignment row
    • Table alignment shift data
    • Table icon buttons
    • Table lg
    • Table md
    • Table one action
    • Table side highlight
    • Table sm
    • Table sticky
    • Table two actions
    • Table two plus actions
    • Description
    • Footer
    • Text input error
    • Description
    • Footer
    • Textarea error
    • Description
    • Footer
    • Time default
    • Time timezone
    • Description
    • Timeline with date
    • Description
    • Footer
    • Time stamp default
    • Description
    • Title colors
    • Title default
    • Title light weight
    • Description
    • Footer
    • Title count default
    • Description
    • Footer
    • Title detail default
    • Description
    • Footer
    • Tooltip default react
    • Tooltip icon
    • Tooltip interaction
    • Tooltip margin
    • Tooltip selectors
    • Description
    • Treemap chart colors
    • Treemap chart default
    • Treemap chart drillable
    • Treemap chart grouped data
    • Treemap chart tooltip
    • Description
    • Footer
    • Typeahead with pills
    • Typeahead with pills async
    • Typeahead with pills async custom options
    • Typeahead with pills async users
    • Typeahead without pills
    • Description
    • Footer
    • User block content subtitle rails
    • User block content subtitle react
    • Description
    • Footer
    • User badge default
  • More
    • Versions
    • Source
    • Playground
    • Stats
    • Metadata
    • Wiki
    • Announcements
    Community
    • Articles
    • Tutorials
    • Videos
    • Community
  1. Gems
  2. playbook_ui
  3. 11.16.0.pre.alpha.reactupgrade1

playbook_ui

Playbook Design System. Built for Nitro, but powering all.

Types
Docs
Guides
Zeitwerk
Namespace
Optimized

Version

11.16.0.pre.alpha.reactupgrade1

Authors

Power UX and Power Devs

Dependencies

actionpack, actionview, activesupport, react-rails, redcarpet, rouge, view_component, webpacker-react, byebug, github_changelog_generator, rails, rspec-html-matchers, rspec-rails, rubocop, rubocop-performance, spring, spring-watcher-listen, tzinfo-data

Quick Start

bundle add playbook_ui

Getting Started

Learn more about the Playbook_ui gem.

Installation

Learn more about how to install and configure the gem

Documentation

Learn more about the details

Guides

Learn more about the gem in the written guides

Reference

Learn more about the classes and modules

Documentation

app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.md

Read about "Avatar monogram" in playbook_ui

Read more

app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md

Read about "Avatar no image" in playbook_ui

Read more

app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md

Read about "Avatar status" in playbook_ui

Read more

app/pb_kits/playbook/pb_avatar/docs/_description.md

Read about "Description" in playbook_ui

Read more

Playground

Test, play and inspect the gem for yourself

irb(main):001:0>

            

Playground

Run a Ruby playground with the playbook_ui gem pre-installed

Play

Top-Level Modules

  • Playbook
Home
Gems
Docs
Contribute
Monitoring
Twitter GitHub Mastodon

© 2025 gem.sh - Beautiful documentation for any Ruby gem