Pluma
Theme
Auto
Overview
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Foundations
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Components
Overview
Status
Layout
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Typography
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Content
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Navigation
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Buttons
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Forms
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Data display
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Feedback
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Overlays
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
Misc
VisuallyHidden
Patterns
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Advanced
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
Fly Migration
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Components
v2.170.1
Icons
v1.15.0
MCP
v0.8.18
Tokens
v0.34.1
SideNav
Figma
Github
Storybook
A component to display a navigation sidebar.
Code Guidelines
Code Guidelines
Design Guidelines
Design Guidelines
Test Helpers
Test Helpers
Design Guidelines coming soon!
Theme
Auto
Copy for LLMs
'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
