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::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::HomeAddressStreet
    • 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
    • Description
    • Description
    • Bar graph colors
    • Bar graph spline
    • Description
    • Body light
    • Description
    • Footer
    • Description
    • Button default
    • Button full width
    • 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
    • Description
    • Footer
    • 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 year range
    • Description
    • Description
    • Description
    • Footer
    • Description
    • Date year stacked default
    • Description
    • Footer
    • Dialog compound components
    • Dialog scrollable
    • Dialog separators
    • Dialog should close on overlay
    • Description
    • Distribution bar custom colors
    • Description
    • File upload custom description
    • Description
    • Filter default
    • Filter no background
    • Filter no sort
    • 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 min max
    • Gauge sizing
    • Description
    • Footer
    • Description
    • Footer
    • Description
    • Footer
    • Home address street default
    • Home address street emphasis
    • 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
    • Description
    • Line graph colors
    • Description
    • Description
    • Description
    • Footer
    • Message default
    • Description
    • Multiple users size
    • Description
    • Description
    • With img nav
    • Description
    • Passphrase breached
    • Passphrase default
    • 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
    • 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
    • Description
    • Footer
    • Time stamp default
    • Description
    • Title colors
    • Title light
    • Description
    • Footer
    • Title count default
    • Description
    • Footer
    • Title detail default
    • Description
    • Footer
    • 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
    • Description
    • Footer
    • Description
    • Footer
    • User badge default
  • More
    • Versions
    • Source
    • Playground
    • Stats
    • Metadata
    • Wiki
    • Announcements
    Community
    • Articles
    • Tutorials
    • Videos
    • Community
  1. Gems
  2. playbook_ui
  3. 10.26.1

playbook_ui

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

Types
Docs
Guides
Zeitwerk
Namespace
Optimized

Version

10.26.1

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