Paragon Design System

npm_versionnpm Paragon package page

Library Status

Components Status

ComponentDesignDevelopment
ActionRow Stable
Done
Done
Alert Stable
Done
Done
AlertModal New
Done
Done
Annotation New
Done
In progress
Avatar New
Done
Done
AvatarButton New
Done
Done
Badge Stable
Done
Done
Breadcrumbs Needs Work
Replace with react-bootstrap shim

DONE
To Do
Bubble New
Done
Done
Button Stable
Done
Done
ButtonGroup Stable
A pass through from react-bootstrap

Done
Done
Card Stable
Partially a pass-thru from react-bootstrap, with custom subcomponents.

Done
Done
Carousel Stable
A pass through from react-bootstrap

Done
Done
Chip New
Done
Done
ChipCarousel New
Done
Done
Collapsible Stable
Needs Review
Done
ColorPicker In progress
In progress
In progress
Container Stable
Done
Done
Data views New
Done
In progress
DataTable New
Done
In progress
Dropdown Stable
Done
Done
Dropzone New
Done
Done
Figure Stable
Done
Done
Form Stable
Done
Done
Form.Autosuggest New
Done
In progress
Form.Checkbox New
Done
Done
Form.Control Stable
Done
Done
Form.Control.Feedback Stable
Done
Done
Form.Group Stable
Done
Done
Form.Label Stable
Done
Done
Form.Radio New
Done
Done
Form.Switch New
Done
Done
FullscreenModal New
Done
Done
Hyperlink Needs Work
Improve prop naming. Deprecate content prop.
Use React.forwardRef for ref forwarding.

Done
Done
Icon Stable
Done
Done
IconButton New
Done
Done
IconButtonToggle Stable
Helps toggle Data view between list, card view etc.

In Progress
Done
Image Stable
Done
Done
InputGroup Stable
Done
Done
Layout New
Done
Done
MailtoLink Needs Work
Remove unnecessary props.
Remove baked in English strings.
Use React.forwardRef for ref forwarding

Done
To Do
MarketingModal New
Done
Done
Menu New
Done
Done
ModalDialog New
Done
Done
ModalLayer New
Done
Done
ModalPopup New
Done
Done
Nav Stable
Done
Done
Navbar Stable
Done
Done
OverflowScroll New
Done
Done
Overlay Stable
Done
Done
PageBanner New
Complete
In Progress
Pagination Needs Work
TODO: shim from react-bootstrap
Breaks if given 5000 pages.
Overly complex implementation.
Remove baked in english strings

Done
To Do
Popover Stable
Done
Done
ProductTour New
Done
Done
ProgressBar Stable
Done
Done
Scrollable New
Adds overflow:auto scrolling to wrapped elements. And adds dropshadows when content wrapped within is scrolled up or down

In Progress
In Progress
SearchField Stable
Needs Review
Done
SelectMenu New
Done
Done
SelectableBox Stable
Done
Done
Sheet New
Window-level edge-anchored content container with elevation shadow, with option to block content.

In Progress
In Progress
Skeleton New
Done
Done
Spinner Stable
Done
Done
Stack New
Done
In progress
StandardModal New
Done
Done
StatefulButton Stable
Done
Done
Stepper Stable
Done
Done
Sticky New
Done
In progress
TableControlBar New
Done
In progress
TableFilters New
In progress
In progress
TableFooter New
Done
In progress
Tabs Stable
Done
Done
Toast Stable
Done
Done
Tooltip Stable
Done
Done
TransitionReplace Stable
Done
Done
Truncate Deprecate Soon
Plan to replace with native css implementation as per https://github.com/openedx/paragon/issues/3311

Done
Done
Edit this pagein a new tabLeave feedbackin a new tab
Contents
All components (A-Z)