Components

Explore all 155 components. Charts and add-ons ship in separate packages.

Data

10
Badge
Chip
DataList
DataTable
Gauge
Indicator
ReorderableList
SwipeableRow
Table
Timeline

Layout

18
AppShell
Block
Divider
Flex
Gradient
Grid
KeyboardAvoidingArea
KeyboardAwareLayout
Layout
Masonry
MotionBlock
OverflowList
SafeArea
ScrollArea
Scroller
Space
Splitter
Surface

Input

29
AutoComplete
Button
Cascader
Checkbox
ColorInput
ColorPicker
ComboboxPopover
ControlField
CopyButton
FileInput
Form
IconButton
Input
Joystick
Knob
NumberInput
PhoneInput
PinInput
Radio
Rating
Search
SegmentedControl
Select
Slider
Switch
TextArea
Toggle
TreeSelect
Wheel

Form

1
FormLayout

Feedback

8
Alert
EmptyState
Loader
LoadingOverlay
Progress
Ring
Skeleton
Toast

Overlay

9
ActionBar
ContextMenu
Dialog
FloatingActions
FloatingWindow
HoverCard
Overlay
Popover
Tooltip

Typography

8
Blockquote
GradientText
Highlight
Icon
KeyCap
ShimmerText
Text
Title

Display

11
Accordion
Avatar
Card
Collapse
ColorSwatch
FloatingIndicator
ListGroup
Marquee
RollingNumber
Spoiler
StickyNote

Navigation

11
Breadcrumbs
Link
Menu
Menubar
MenuItemButton
NavTree
Pagination
Stepper
TableOfContents
Tabs
Tree

Media

4
BackgroundImage
Image
Lightbox
Waveform

Charts

24
npm install @plocks/charts
AreaChart
BarChart
BubbleChart
CandlestickChart
ComboChart
DonutChart
FunnelChart
GroupedBarChart
HeatmapChart
HistogramChart
LineChart
MarimekkoChart
NetworkChart
ParetoChart
PieChart
RadarChart
RadialBarChart
RidgeChart
SankeyChart
ScatterChart
SparklineChart
StackedAreaChart
StackedBarChart
ViolinChart

Add-on packages

Install the package shown on each card before using its components.

@plocks/brands

2
npm install @plocks/brands
BrandButton
BrandIcon

@plocks/emoji-picker

2
npm install @plocks/emoji-picker
EmojiPicker
EmojiPickerInput

@plocks/qrcode

1
npm install @plocks/qrcode
QRCode

@plocks/carousel

1
npm install @plocks/carousel
Carousel

@plocks/dates

10
npm install @plocks/dates
Calendar
DatePicker
DatePickerInput
MiniCalendar
MonthPicker
MonthPickerInput
TimePicker
TimePickerInput
YearPicker
YearPickerInput

@plocks/code

2
npm install @plocks/code
CodeBlock
Markdown

@plocks/media

3
npm install @plocks/media
AudioPlayer
SoundButton
Video

@plocks/spotlight

1
npm install @plocks/spotlight
Spotlight

React Native design for iOS, Android, and Web.

Quick Links

ComponentsChartsHooksAdd-ons & extensions

Docs

Getting StartedExamplesLocalizationAccessibility

Agents

llms.txtSkillsSitemap

Resources

FAQChangelogContributing