design-system
Strapi.io's design system :rocket:
File Explorer
- config.json
- action.test.js
- index.js
- .eslintignore
- .eslintrc.js
- .gitignore
- action.yml
- index.js
- jest.config.js
- package.json
- README.md
- bug_report.yml
- config.yml
- feature_request.yml
- check-changeset.cjs
- check-major-changeset.cjs
- bundle-size.yml
- changeset-check.yml
- checks.yml
- chromatic.yml
- experimental.yml
- issues_dailyCron.yml
- issues_handleLabel.yml
- release.yml
- tests.yml
- pull_request_template.md
- commit-msg
- pre-commit
- settings.json
- plugin-interactive-tools.cjs
- yarn-3.6.4.cjs
- fileMock.js
- styleMock.js
- logo.svg
- main.ts
- preview-head.html
- preview.tsx
- CleanArgTypes.tsx
- ColorCards.tsx
- DeprecationNotice.tsx
- Image.tsx
- Markdown.tsx
- Typescale.tsx
- TypeTable.tsx
- Typography.tsx
- ViewSource.tsx
- accessibility_illustration.png
- baseline.png
- responsive-grid.png
- spacing-system.png
- typefaces.png
- cover.png
- logo.svg
- logo_dark.svg
- roy-kent.jpeg
- ted-lasso.jpeg
- first.jpg
- second.png
- third.png
- strapi-img.png
- design-system.mdx
- icons.mdx
- primitives.mdx
- migration-v1-v2.mdx
- contributing.mdx
- Troubleshooting.mdx
- welcome.mdx
- Icons.mdx
- Icons.stories.tsx
- overview.mdx
- Symbols.mdx
- Symbols.stories.tsx
- accessibility.mdx
- color.mdx
- elevation.mdx
- grid.mdx
- responsive.mdx
- typography.mdx
- BaseLink.mdx
- BaseLink.stories.tsx
- Combobox.mdx
- Combobox.stories.tsx
- overview.mdx
- Select.mdx
- Select.stories.tsx
- Checkbox.mdx
- Checkbox.stories.tsx
- Combobox.mdx
- Combobox.stories.tsx
- DatePicker.mdx
- DatePicker.stories.tsx
- DateTimePicker.mdx
- DateTimePicker.stories.tsx
- JSONInput.mdx
- JSONInput.stories.tsx
- NumberInput.mdx
- NumberInput.stories.tsx
- Radio.mdx
- Radio.stories.tsx
- Select.mdx
- Select.stories.tsx
- Textarea.mdx
- Textarea.stories.tsx
- TextInput.mdx
- TextInput.stories.tsx
- TimePicker.mdx
- TimePicker.stories.tsx
- Toggle.mdx
- Toggle.stories.tsx
- Accordion.mdx
- Accordion.stories.tsx
- Alert.mdx
- Alert.stories.tsx
- Avatar.mdx
- Avatar.stories.tsx
- Badge.mdx
- Badge.stories.tsx
- Box.mdx
- Box.stories.tsx
- Breadcrumbs.mdx
- Breadcrumbs.stories.tsx
- Button.mdx
- Button.stories.tsx
- Card.mdx
- Card.stories.tsx
- Carousel.mdx
- Carousel.stories.tsx
- Dialog.mdx
- Dialog.stories.tsx
- Divider.mdx
- Divider.stories.tsx
- EmptyStateLayout.mdx
- EmptyStateLayout.stories.tsx
- Field.mdx
- Field.stories.tsx
- Flex.mdx
- Flex.stories.tsx
- Grid.mdx
- Grid.stories.tsx
- IconButton.mdx
- IconButton.stories.tsx
- Link.mdx
- Link.stories.tsx
- LinkButton.mdx
- LinkButton.stories.tsx
- LiveRegions.mdx
- LiveRegions.stories.tsx
- Loader.mdx
- Loader.stories.tsx
- Modal.mdx
- Modal.stories.tsx
- Pagination.mdx
- Pagination.stories.tsx
- Popover.mdx
- Popover.stories.tsx
- ProgressBar.mdx
- ProgressBar.stories.tsx
- RawTable.mdx
- RawTable.stories.tsx
- Searchbar.mdx
- Searchbar.stories.tsx
- SimpleMenu.mdx
- SimpleMenu.stories.tsx
- Status.mdx
- Status.stories.tsx
- Switch.mdx
- Switch.stories.tsx
- Table.mdx
- Table.stories.tsx
- Tabs.mdx
- Tabs.stories.tsx
- Tag.mdx
- Tag.stories.tsx
- TextButton.mdx
- TextButton.stories.tsx
- Tooltip.mdx
- Tooltip.stories.tsx
- AccessibleIcon.mdx
- DesignSystemProvider.mdx
- DismissibleLayer.mdx
- DismissibleLayer.stories.tsx
- FocusTrap.mdx
- FocusTrap.stories.tsx
- Helpers.mdx
- Portal.mdx
- Portal.stories.tsx
- ScrollArea.mdx
- ScrollArea.stories.tsx
- VisuallyHidden.mdx
- .eslintignore
- .eslintrc
- .oxfmtrc.jsonc
- .prettierrc
- chromatic.config.json
- package.json
- styled.d.ts
- tsconfig.json
- vite.config.js
- Accordion.test.tsx
- Accordion.tsx
- index.ts
- Alert.tsx
- index.ts
- utils.ts
- Avatar.test.tsx
- Avatar.tsx
- index.ts
- Badge.tsx
- index.ts
- BaseLink.tsx
- index.ts
- Breadcrumbs.test.tsx
- Breadcrumbs.tsx
- Crumb.tsx
- CrumbLink.tsx
- CrumbSimpleMenu.tsx
- Divider.tsx
- index.ts
- Button.tsx
- constants.ts
- index.ts
- utils.test.tsx
- utils.ts
- Card.tsx
- CardAction.tsx
- CardAsset.tsx
- CardBadge.tsx
- CardBody.tsx
- CardCheckbox.tsx
- CardContent.tsx
- CardContext.tsx
- CardHeader.tsx
- CardTimer.tsx
- CardTitle.tsx
- index.ts
- Carousel.tsx
- CarouselActions.tsx
- CarouselImage.tsx
- CarouselInput.tsx
- CarouselSlide.tsx
- index.ts
- Checkbox.tsx
- index.ts
- Combobox.test.tsx
- Combobox.tsx
- index.ts
- VirtualizedList.tsx
- DatePicker.test.tsx
- DatePicker.tsx
- index.ts
- DateTimePicker.test.tsx
- DateTimePicker.tsx
- index.ts
- Dialog.tsx
- index.ts
- Divider.tsx
- index.ts
- EmptyStateLayout.tsx
- index.ts
- Field.test.tsx
- Field.tsx
- index.ts
- IconButton.tsx
- index.ts
- bundle-codemirror.test.ts
- decorationExtension.ts
- index.ts
- JSONInput.test.tsx
- JSONInput.tsx
- index.ts
- Link.tsx
- index.ts
- LinkButton.tsx
- constants.ts
- index.ts
- LiveRegions.test.tsx
- LiveRegions.tsx
- useNotifyAT.ts
- loader.svg
- index.ts
- Loader.tsx
- index.ts
- Main.tsx
- SkipToContent.tsx
- index.ts
- Modal.tsx
- index.ts
- NumberInput.tsx
- next.svg
- previous.svg
- components.tsx
- index.ts
- Pagination.tsx
- PaginationContext.ts
- index.tsx
- Popover.tsx
- index.ts
- ProgressBar.tsx
- index.ts
- Radio.test.tsx
- Radio.tsx
- focusFocusable.ts
- index.ts
- RawCell.tsx
- RawTable.test.tsx
- RawTable.tsx
- RawTableContext.ts
- RawTbody.tsx
- RawThead.tsx
- RawTr.tsx
- index.ts
- Searchbar.tsx
- SearchForm.tsx
- index.ts
- MultiSelect.test.tsx
- MultiSelect.tsx
- MultiSelectNested.test.tsx
- MultiSelectNested.tsx
- SelectParts.tsx
- SingleSelect.test.tsx
- SingleSelect.tsx
- index.ts
- Menu.test.tsx
- Menu.tsx
- SimpleMenu.test.tsx
- SimpleMenu.tsx
- utils.ts
- index.ts
- Status.test.tsx
- Status.tsx
- index.ts
- SubNav.tsx
- SubNavHeader.tsx
- SubNavLink.tsx
- SubNavLinkSection.tsx
- SubNavSection.tsx
- SubNavSectionLabel.tsx
- SubNavSections.tsx
- index.ts
- Switch.tsx
- Cell.tsx
- index.ts
- Table.tsx
- Tbody.tsx
- TFooter.tsx
- Thead.tsx
- Tr.tsx
- index.ts
- Tabs.tsx
- index.ts
- Tag.test.tsx
- Tag.tsx
- index.ts
- Textarea.tsx
- index.ts
- TextButton.tsx
- index.ts
- TextInput.test.tsx
- TextInput.tsx
- index.ts
- TimePicker.test.tsx
- TimePicker.tsx
- index.ts
- Toggle.test.tsx
- Toggle.tsx
- index.ts
- Tooltip.test.tsx
- Tooltip.tsx
- index.ts
- deprecations.test.tsx
- handleResponsiveValues.test.ts
- strings.test.ts
- context.tsx
- deprecations.ts
- getFocusableNodes.ts
- handleResponsiveValues.ts
- keyboardKeys.ts
- objects.ts
- setOpacity.ts
- setTabIndexOnFirstItem.ts
- strings.ts
- theme.ts
- useId.test.tsx
- useComposeRefs.ts
- useControllableState.ts
- useDateFormatter.ts
- useId.ts
- useIntersection.ts
- useIsomorphicLayoutEffect.ts
- useMeasure.ts
- Box.test.tsx
- Box.tsx
- index.ts
- Flex.tsx
- index.ts
- Grid.tsx
- index.ts
- index.ts
- Typography.test.tsx
- Typography.tsx
- index.ts
- buttons.ts
- global.ts
- input.ts
- motion.ts
- type.ts
- extendTheme.test.ts
- dark-colors.ts
- dark-shadows.ts
- index.ts
- index.ts
- light-colors.ts
- light-shadows.ts
- colors.ts
- common-theme.ts
- extendTheme.ts
- index.ts
- sizes.ts
- utils.ts
- AccessibleIcon.test.tsx
- AccessibleIcon.tsx
- index.ts
- index.ts
- FocusTrap.tsx
- index.ts
- index.ts
- KeyboardNavigable.tsx
- index.ts
- Portal.tsx
- index.ts
- ScrollArea.tsx
- index.ts
- VisuallyHidden.tsx
- DesignSystemProvider.tsx
- forwardRef.ts
- index.ts
- types.ts
- utils.tsx
- .eslintignore
- .eslintrc
- CHANGELOG.md
- jest.config.mjs
- LICENSE
- module.d.ts
- package.json
- README.md
- tsconfig.build.json
- tsconfig.json
- vite.config.ts
- Alien.svg
- Archive.svg
- ArrowClockwise.svg
- ArrowDown.svg
- ArrowLeft.svg
- ArrowLineLeft.svg
- ArrowLineRight.svg
- ArrowRight.svg
- ArrowsCounterClockwise.svg
- ArrowsHorizontal.svg
- ArrowsOut.svg
- ArrowsVertical.svg
- ArrowUp.svg
- Bell.svg
- Bold.svg
- Book.svg
- Briefcase.svg
- BulletList.svg
- Calendar.svg
- Car.svg
- CaretDown.svg
- CaretUp.svg
- Cast.svg
- CastleTurret.svg
- ChartBubble.svg
- ChartCircle.svg
- ChartPie.svg
- Check.svg
- CheckCircle.svg
- CheckCircleEmpty.svg
- ChevronDown.svg
- ChevronLeft.svg
- ChevronRight.svg
- ChevronUp.svg
- Clock.svg
- ClockCounterClockwise.svg
- Cloud.svg
- CloudUpload.svg
- Code.svg
- CodeBlock.svg
- Coffee.svg
- Cog.svg
- Collapse.svg
- Command.svg
- Crop.svg
- Cross.svg
- CrossCircle.svg
- Crown.svg
- Cursor.svg
- Database.svg
- Discuss.svg
- Download.svg
- Drag.svg
- Duplicate.svg
- Earth.svg
- EarthStriked.svg
- EmotionHappy.svg
- EmotionUnhappy.svg
- Expand.svg
- ExternalLink.svg
- Eye.svg
- EyeStriked.svg
- Faders.svg
- Feather.svg
- File.svg
- FileCsv.svg
- FileError.svg
- FilePdf.svg
- Files.svg
- FileXls.svg
- FileZip.svg
- Filter.svg
- Folder.svg
- Gift.svg
- Globe.svg
- Graph.svg
- GraphQl.svg
- GridFour.svg
- GridNine.svg
- HandHeart.svg
- Hashtag.svg
- HeadingFive.svg
- HeadingFour.svg
- HeadingOne.svg
- HeadingSix.svg
- HeadingThree.svg
- HeadingTwo.svg
- Headphones.svg
- Heart.svg
- House.svg
- Image.svg
- Images.svg
- IndentDecrease.svg
- IndentIncrease.svg
- Information.svg
- Italic.svg
- Key.svg
- Layout.svg
- Lightbulb.svg
- Lightning.svg
- Link.svg
- List.svg
- ListPlus.svg
- ListSearch.svg
- Loader.svg
- Lock.svg
- Magic.svg
- Mail.svg
- ManyToMany.svg
- ManyToOne.svg
- ManyWays.svg
- Message.svg
- Microphone.svg
- Minus.svg
- MinusCircle.svg
- Monitor.svg
- Moon.svg
- More.svg
- Move.svg
- MusicNotes.svg
- NumberList.svg
- OneToMany.svg
- OneToOne.svg
- OneWay.svg
- PaintBrush.svg
- PaintRoller.svg
- Palette.svg
- Paperclip.svg
- PaperPlane.svg
- Paragraph.svg
- Pencil.svg
- Phone.svg
- Pin.svg
- PinMap.svg
- Plane.svg
- Plant.svg
- Play.svg
- Plus.svg
- PlusCircle.svg
- PresentationChart.svg
- PriceTag.svg
- PuzzlePiece.svg
- Question.svg
- Quotes.svg
- Restaurant.svg
- Rocket.svg
- Scissors.svg
- SealCheck.svg
- Search.svg
- Server.svg
- Shield.svg
- Shirt.svg
- ShoppingCart.svg
- SignOut.svg
- SlidersHorizontal.svg
- Sparkle.svg
- SquaresFour.svg
- Stack.svg
- Star.svg
- Stethoscope.svg
- Stop.svg
- Store.svg
- StrikeThrough.svg
- Sun.svg
- Television.svg
- ThumbDown.svg
- ThumbUp.svg
- Train.svg
- Trash.svg
- TrendUp.svg
- Typhoon.svg
- Underline.svg
- Upload.svg
- User.svg
- VolumeMute.svg
- VolumeUp.svg
- Walk.svg
- WarningCircle.svg
- Webhooks.svg
- Wheelchair.svg
- BlocksField.svg
- BooleanField.svg
- CodeSquare.svg
- CollectionType.svg
- ComponentField.svg
- DateField.svg
- Discord.svg
- Discourse.svg
- DynamicZoneField.svg
- EmailField.svg
- EmptyData.svg
- EmptyDocuments.svg
- EmptyPermissions.svg
- EmptyPictures.svg
- EnumerationField.svg
- Facebook.svg
- FeatherSquare.svg
- GitHub.svg
- GlassesSquare.svg
- InformationSquare.svg
- JsonField.svg
- MarkdownField.svg
- MediaField.svg
- Medium.svg
- NumberField.svg
- PasswordField.svg
- PlaySquare.svg
- Reddit.svg
- RelationField.svg
- SingleType.svg
- Strapi.svg
- TextField.svg
- UidField.svg
- X.svg
- index.ts
- symbols-index.ts
- .eslintignore
- .eslintrc
- CHANGELOG.md
- LICENSE
- package.json
- styled.d.ts
- svgr.icons.config.cjs
- svgr.symbols.config.cjs
- tsconfig.build.json
- tsconfig.json
- vite.config.ts
- Combobox.test.tsx
- Combobox.tsx
- index.ts
- VirtualizedViewport.tsx
- index.ts
- Select.test.tsx
- Select.tsx
- Collection.tsx
- events.ts
- useCallbackRef.ts
- useCollator.ts
- useFilter.ts
- usePrev.ts
- index.ts
- .eslintignore
- .eslintrc
- CHANGELOG.md
- jest.config.mjs
- LICENSE
- package.json
- README.md
- tsconfig.build.json
- tsconfig.json
- vite.config.ts
- Lightning.svg
- find-release-from-changeset.js
- pre-publish.sh
- env-setup.js
- global-setup.js
- .commitlintrc.ts
- .eslintignore
- .eslintrc
- .gitattributes
- .gitignore
- .nvmrc
- .oxfmtrc.jsonc
- .oxlintrc.jsonc
- .prettierignore
- .prettierrc
- .yarnrc.yml
- CHANGELOG.md
- CODE_OF_CONDUCT.md
- CONTRIBUTING.md
- jest.config.js
- LICENSE
- package.json
- README.md
- tsconfig.json
- turbo.json
- yarn.lock
# Use via CDN
jsDelivrjsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.
Command Glossary
Commands referenced in this DOCs, explained below.
npm
View Details ▼
npm
JavaScript and Node.js package manager.
Manage Node.js projects and their module dependencies.
Some subcommands such as `install`, `run`, etc. have their own usage documentation.
npm init {{[-y|--yes]}}
Create a `package.json` file with default values (omit `--yes` to do it interactively):
npm {{[i|install]}}
Download all the packages listed as dependencies in `package.json`:
npm {{[i|install]}} {{package_name}}@{{version}}
Download a specific version of a package and add it to the list of dependencies in `package.json`:
yarn
View Details ▼
yarn
JavaScript and Node.js package manager alternative.
yarn global add {{module_name}}
Install a module globally:
yarn install
Install all dependencies referenced in the `package.json` file (the `install` is optional):
yarn add {{module_name}}@{{version}}
Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):
