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

    • module Playbook
    • module Playbook::Classnames
    • module Playbook::Forms
    • module Playbook::Markdown
    • module Playbook::Markdown::Helper
    • module Playbook::NumberSpacing
    • 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::PbTypeahead
    • module Playbook::PbUser
    • module Playbook::PbUserBadge
    • module Playbook::PbWeekdayStacked
    • module Playbook::Props
    • 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::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 monogram
    • Avatar no image
    • Avatar status
    • Description
    • Footer
    • Description
    • Description
    • Description
    • Description
    • Footer
    • Description
    • Button default
    • Button full width
    • Button loading
    • Footer
    • Description
    • Caption variants
    • Description
    • Footer
    • Card border none
    • Card border radius
    • Card header
    • Card highlight
    • Card light
    • Description
    • 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 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
    • 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 justify
    • Flex reverse
    • Flex spacing
    • Flex wrap
    • Description
    • Footer
    • Form form with validate
    • Form group full width
    • 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
    • Description
    • Description
    • Description
    • Footer
    • Label pill default
    • Description
    • Footer
    • Label value default
    • Label value details
    • Description
    • Layout collection
    • Layout collection detail
    • Description
    • Footer
    • Description
    • 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
    • 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 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 variants
    • Description
    • Footer
    • Title count default
    • Description
    • Footer
    • Title detail default
    • Description
    • Footer
    • Tooltip selectors
    • 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.1.0

playbook_ui

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

Types
Docs
Guides
Zeitwerk
Namespace
Optimized

Version

10.1.0

Authors

Power UX and Power Devs

Dependencies

actionpack, actionview, activesupport, react-rails, redcarpet, rouge, view_component, webpacker-react, byebug, github_changelog_generator, overcommit, rails, rspec-html-matchers, rspec-rails, rubocop, 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