Components showcase

Alpha Beta EnterpriseThis feature is available with an Enterprise plan. GrowthThis feature is available with a Growth plan. SSOThis feature is available with the SSO add-on. StarterThis feature is available with a Strapi Cloud Starter plan. ProThis feature is available with a Strapi Cloud Pro plan. BusinessThis feature is available with a Strapi Cloud Business plan. my_feature_flagThis feature requires the my_feature_flag feature flag to be enabled. 5.0.0This feature requires Strapi version 5.0.0 or later.

Page summary:

This is a demo page for designers. It renders every general-purpose component and rendering case used in the docs, grouped by category. For API-specific components, see the API components showcase.

This page groups components by category, mirroring how the documentation is organized. Use the table of contents to jump to a section.

Identity cards

The identity card summarizes the key facts about a feature or a plugin at the top of a page.

Identity card for a feature:

IDENTITY CARD

Plan

Free feature

Role & permission

Requires the relevant permission in the admin panel

Activation

Available by default

Environment

Available in both Development & Production environments

Identity card for a plugin:

IDENTITY CARD

Location

Usable and configurable via the admin panel and server code

Package name

@strapi/plugin-users-permissions

Additional resources

Strapi Marketplace page

Breaking change ID card, with both answers set to "Yes" and an informational note:

 Is this breaking change affecting plugins?Yes

 Is this breaking change automatically handled by a codemod?Yes

(see my-codemod)

This change requires a manual migration step.

Breaking change ID card variant, with both answers set to "No" and no note:

 Is this breaking change affecting plugins?No

 Is this breaking change automatically handled by a codemod?No

Text & inline elements

This category covers the plain Markdown primitives: text formatting, headings, lists, and tables.

Text formatting

The paragraph below mixes the inline styles most often used in the docs.

Regular paragraph text with bold and inline code. Here is a plain link, and here is a link wrapping inline code. You can also reference an internal page like the REST API introduction.

To reference a button in the interface, use an icon followed by its bold label, like the Filters button or the Configure the view button.

An inline This is an Annotation: a short definition or note shown on hover or click, inline within a sentence. annotation inside a sentence.

Headings

Headings structure a page. The showcase shows levels 3 to 5, since levels 1 and 2 are reserved for the page title and section titles.

Heading level 4

This is the text that follows a level 4 heading.

Heading level 5

This is the text that follows a level 5 heading.

Lists

Lists come in three flavors: unordered, ordered, and nested.

Bullet list:

• First item
• Second item with inline code
• Third item with a link
  • Nested bullet
  • Nested bullet with bold
    • Deeper nested bullet

Numbered list (procedure):

1. First step
2. Second step with inline code
3. Third step
   1. Nested numbered step
   2. Nested numbered step

Tables

Tables are used for reference information such as parameters or availability matrices.

Feature	Availability	Notes
REST API	✅	Enabled by default
GraphQL	✅	Via @strapi/plugin-graphql
Document Service API	✅	See docs

Admonitions

Every admonition type is shown below, each containing text, a bullet list, a link, inline code, a link wrapping inline code, and a fenced code block, to demonstrate rich rendering inside.

Note

This is a note admonition with inline code, a plain link, and a link with inline code.

• A bullet inside a note
• Another bullet

// A code block inside a note
const strapi = require('@strapi/strapi');

Custom tip title

This is a tip admonition with inline code, a plain link, and a link with inline code.

• Bullet one
• Bullet two

terminal

yarn strapi develop

Info

This is an info admonition with inline code, a plain link, and a link with inline code.

{ "enabled": true }

Caution

This is a caution admonition with inline code, a plain link, and a link with inline code.

• Watch out for this
• And this

const x: number = 42;

Warning

This is a danger admonition with inline code, a plain link, and a link with inline code.

terminal

rm -rf ./build

This is a "Strapi-special" callout

This is the custom strapi-branded admonition with inline code, a plain link, and a link with inline code.

• Strapi-specific note
• Another bullet

export default { /* config */ };

Prerequisites

This prerequisites admonition contains inline code, a plain link, and a link with inline code.

• Node.js installed (see requirements)
• A running Strapi project created with npx create-strapi-app
• Basic knowledge of REST or GraphQL

Code & tabs

Code can be shown as standalone blocks or grouped inside tabs.

Code blocks

A short code block without a title:

const port = env.int('PORT', 1337);

A code block with a title but no line highlighting:

src/api/article/controllers/article.js

'use strict';

/**
 * A custom `article` controller that extends the default core controller
 * and overrides the `find` method to inject a default sort.
 */
const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController('api::article.article', ({ strapi }) => ({
  async find(ctx) {
    ctx.query = {
      ...ctx.query,
      sort: ctx.query.sort || 'publishedAt:desc',
    };

    const { data, meta } = await super.find(ctx);

    return { data, meta };
  },
}));

The exact same block, now with highlighted lines (the injected sort and the call to the core controller):

src/api/article/controllers/article.js

'use strict';

/**
 * A custom `article` controller that extends the default core controller
 * and overrides the `find` method to inject a default sort.
 */
const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController('api::article.article', ({ strapi }) => ({
  async find(ctx) {
    ctx.query = {
      ...ctx.query,
      sort: ctx.query.sort || 'publishedAt:desc',
    };

    const { data, meta } = await super.find(ctx);

    return { data, meta };
  },
}));

A terminal block, used when the reader has commands to run in a terminal (a bash, sh, or powershell language renders as a terminal):

terminal

yarn strapi develop

Tabs

Simple tabs:

REST

Content of the REST tab, with inline code and a link.

GraphQL

Content of the GraphQL tab.

Tabs containing different kinds of content, one per tab (a table, a list with an admonition, and a code block):

Table

Parameter	Type	Description
locale	String	Locale to fetch documents for
status	Enum	published or draft
sort	String	Field and order, e.g. title:asc

List & admonition

Steps to enable the feature:

1. Open the admin panel
2. Go to Settings
3. Toggle the feature on

Note

The feature is available on all plans.

Code

config/plugins.js

module.exports = {
  'my-plugin': {
    enabled: true,
    config: { apiKey: process.env.MY_PLUGIN_API_KEY },
  },
};

JavaScript / TypeScript tabs, with a title bar on each code block:

JavaScript

config/server.js

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
});

TypeScript

config/server.ts

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
});

Tabs nested inside tabs, with admonitions and titled code blocks inside:

macOS / Linux

Choose your package manager:

yarn

Tip

Run the following in your project root:

terminal

Terminal

yarn install && yarn develop

npm

terminal

Terminal

npm install && npm run develop

Windows

yarn

terminal

PowerShell

yarn install; yarn develop

npm

terminal

PowerShell

npm install; npm run develop

Steps, progress & checklists

Steps and checklists guide the reader through a procedure.

StepDetails (collapsible steps):

Step 1: Create a collection type

Use the Content-Type Builder to create a new collection type.

Note

Nested admonition inside a step.

terminal

yarn strapi develop

Step 2: Add fields

Add a title field of type Text and a description field of type Rich text.

Checklist:

Deployment checklist

• Set the APP_KEYS environment variable
• Configure the production database
• Run yarn build before deploying

Cards & navigation

Doc cards link to related pages. They can be shown in a static grid or in an expandable grid.

Custom doc cards:

Back-end customization

Routes, policies, controllers, services, and more.

Admin panel customization

Logos, themes, and menu configuration.

REST API

Interact with your content via REST.

Expandable doc cards (collapses after the first few, then reveals the rest):

Content Manager

Create and manage entries.

Content-Type Builder

Design your content structure.

Layout

Layout components arrange content in columns.

Two-column layout with Columns:

Before

Content in the left column, with inline code and a bullet list:

• Item A
• Item B

After

Content in the right column, with a link.

Side-by-side layout:

Explanation text on the left, describing what the code on the right does.

const entries = await strapi.documents('api::article.article').findMany();

Expandable content

ExpandableContent collapses long content beyond a set height and lets the reader expand it with a "Show more" toggle.

This block is collapsed beyond a certain height and can be expanded by the reader. It can contain any content: paragraphs, inline code, links, and lists.

• Item one
• Item two
• Item three
• Item four
• Item five

Wrapping a long code block, so the reader can expand it only if they need the full example:

config/middlewares.js

module.exports = [
  'strapi::logger',
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'market-assets.strapi.io'],
          'media-src': ["'self'", 'data:', 'blob:', 'market-assets.strapi.io'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Media & miscellaneous

Media components embed diagrams, walkthroughs, and interactive tools.

External link: Strapi website — it appends an icon to signal that the reader is leaving the documentation site.

Mermaid diagram (via MermaidWithFallback, with a light/dark image fallback):

Loading diagram...

Guideflow interactive walkthrough:

Interactive query builder:

Endpoint:Please keep the /api/ part unless you explicitly configured it differently in your project.

Endpoint Query Parameters:

{
sort: ['title:asc'],
filters: {
  title: { $eq: 'hello' },
},
populate: '*',
}

Feel free to modify the code above.

Query String URL:

What's next?

What's next?

1

Explore the admin panel

Create entries, manage roles, and upload media.

→

2

Connect a frontend

Consume your content via REST or GraphQL.

→