Skip to content
πŸ“ Simple documentation for your React components
JavaScript CSS TypeScript
Branch: master
Clone or download
dependabot and satya164 chore(deps): bump lodash.mergewith from 4.6.1 to 4.6.2
Bumps [lodash.mergewith]( from 4.6.1 to 4.6.2.
- [Release notes](
- [Commits](

Signed-off-by: dependabot[bot] <>
Latest commit 5e52850 Jul 11, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: add circle ci config Jan 13, 2019
bin feat: add a cli Feb 24, 2019
example fix: fix typescript support Jun 25, 2019
src fix: fix showing type annotations for ts Jun 25, 2019
.babelrc feat: add a cli Feb 24, 2019
.editorconfig chore: initial commit Dec 4, 2016
.eslintignore chore: setup prettier Jul 15, 2017
.eslintrc feat: add typescript support Jun 25, 2019
.flowconfig chore: update dependencies and fix flow Apr 24, 2018
.gitignore chore: update dependencies and fix flow Apr 24, 2018
.stylelintrc chore: upgrade to Babel 7 and latest Linaria Sep 21, 2018
.travis.yml chore: use release-it for automated release Oct 11, 2018 refactor: add very basic theming support Mar 18, 2019
components.js feat: export components Feb 1, 2018
linaria.config.js refactor: use linaria/react for styling Feb 22, 2019
package.json chore: release 0.20.2 Jun 25, 2019
yarn.lock chore(deps): bump lodash.mergewith from 4.6.1 to 4.6.2 Jul 12, 2019

Component Docs

styled_with linaria

πŸ“ Simple documentation for your React components.


  • Simple API with minimal configuration
  • Fully static, deployable on GitHub pages
  • Both server + client routing
  • Optimized for mobile screens
  • Improved DX with useful features like hot reload
  • Supports rendering React Components as well as markdown and MDX files
  • Support including markdown from a file reference in markdown files


yarn add --dev component-docs


You can specify the configuration using a JavaScript, JSON or YAML file. This can be in form of:

  • component-docs.config.js JS file exporting the object (recommended).
  • component-docs property in a package.json file.
  • .component-docs file with JSON or YAML syntax.
  • .component-docs.json, .component-docs.yaml, .component-docs.yml, or .component-docs.js file.

Example component-docs.config.js:

module.exports = {
  port: 1234,
  pages: [
    { type: 'md', file: path.resolve(__dirname, '') },
    { type: 'md', file: path.resolve(__dirname, '') },


The configuration object can contain the following properties:

  • pages (required): An array of items or a function returning an array of items to show as pages
  • root: The root directory for the project.
  • output: Output directory for generated files.
  • assets: Directories containing the asset files.
  • styles: Additional CSS files to include in the HTML.
  • scripts: Additional JS files to include in the HTML.
  • logo: Logo image from assets to show in sidebar.
  • colors: Colors to use in the page. This is implemented using CSS variables and falls back to default grey colors on IE.
    • primary: Primary color used in highlighted items, links etc.
  • github: Link to github folder to show edit button.
  • port: Port to run the server on.
  • open: Whether to open the browser window.

Format for pages

Each item in your pages array can contain 3 properties:

  • type (required): md for markdown files, mdx for MDX files, component to extract component documentation using react-docgen or custom to render provided file as a React component.
  • file (required): absolute path to the file.
  • group: A heading to group this item under. By default, grouping is done for component documentation pages with a dot (.) in the name. You can pass null here to disable this behavior.


To serve docs with your config, run:

yarn component-docs serve

You can also specify a glob of files to use as pages:

yarn component-docs serve "*.{md,mdx}"

The CLI accepts several arguments. See --help for details.


If you want to use component-docs programmatically, you can use the exported serve and build functions.


import path from 'path';
import { build } from 'component-docs';

const pages = [
  { type: 'md', file: '../docs/Get' },
  { type: 'mdx', file: '../docs/Contributing.mdx' },
  { type: 'separator' },
  { type: 'component', file: '../src/Button.js', }
  { type: 'component', file: '../src/Calendar.js' },

  pages: => ({, file: path.join(__dirname, page.file) })),
  output: path.join(__dirname, 'pages'),

The serve and build functions accept the same options object that's used for the configuration file. If a configuration file already exists, the options will be merged.


MDX support

MDX is a format that lets you seamlessly use JSX in your Markdown documents. This allows you to write your documentation using markdown and have interactive React components inside the documentation.

File references in Markdown

You can refer to another markdown file and the content of the markdown file will be inlined. When a line starts with a / and ends in .md, we recognize it as a file reference.

For example:

## Some heading


Some more text here.

Here, there is a reference to the ../ file. Its content will be inlined into the markdown file where it's referenced.

Specifying metadata

Documents can specify metadata such as the page title, description and link to use. The methods vary according to the type of the document.

For markdown documents, metadata can be specified in the YAML front-matter:

title: Home
description: This is the homepage.
link: index

For MDX and React documents, metadata can be exported as a named export named meta:

export const meta = {
  title: 'Home',
  description: 'This is the homepage.',
  link: 'index',


component-docs is used for react-native-paper

You can’t perform that action at this time.