{"id":14483734,"url":"https://github.com/callstack/component-docs","last_synced_at":"2025-05-13T13:58:09.190Z","repository":{"id":13963489,"uuid":"75531020","full_name":"callstack/component-docs","owner":"callstack","description":"📝  Simple documentation for your React components","archived":false,"fork":false,"pushed_at":"2023-01-06T01:39:13.000Z","size":3201,"stargazers_count":138,"open_issues_count":29,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-07T23:39:39.281Z","etag":null,"topics":["documentation","hacktoberfest","mdx","react-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/callstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-04T10:34:26.000Z","updated_at":"2024-09-24T09:25:01.000Z","dependencies_parsed_at":"2023-01-13T20:00:07.940Z","dependency_job_id":null,"html_url":"https://github.com/callstack/component-docs","commit_stats":null,"previous_names":["satya164/component-docs"],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fcomponent-docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fcomponent-docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fcomponent-docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fcomponent-docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callstack","download_url":"https://codeload.github.com/callstack/component-docs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253957260,"owners_count":21990532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","hacktoberfest","mdx","react-components"],"created_at":"2024-09-03T00:02:03.968Z","updated_at":"2025-05-13T13:58:09.164Z","avatar_url":"https://github.com/callstack.png","language":"TypeScript","readme":"# Component Docs\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![MIT License][license-badge]][license]\n[![Version][version-badge]][package]\n[![Styled with Linaria][linaria-badge]][linaria]\n\n📝 Simple documentation for your React components.\n\n## Goals\n\n- Simple API with minimal configuration\n- Fully static, deployable on GitHub pages\n- Both server + client routing\n- Optimized for mobile screens\n- Improved DX with useful features like hot reload\n- Supports rendering React Components as well as markdown and MDX files\n- Support including markdown from a file reference in markdown files\n\n## Installation\n\n```sh\nyarn add --dev component-docs\n```\n\n## Configuration\n\nYou can specify the configuration using a JavaScript, JSON or YAML file. This can be in form of:\n\n- `component-docs.config.js` JS file exporting the object (recommended).\n- `component-docs` property in a `package.json` file.\n- `.component-docs` file with JSON or YAML syntax.\n- `.component-docs.json`, `.component-docs.yaml`, `.component-docs.yml`, or `.component-docs.js` file.\n\nExample `component-docs.config.js`:\n\n```js\nmodule.exports = {\n  port: 1234,\n  pages: [\n    { type: 'md', file: path.resolve(__dirname, 'index.md') },\n    { type: 'md', file: path.resolve(__dirname, 'guide.md') },\n  ],\n};\n```\n\n### Options\n\nThe configuration object can contain the following properties:\n\n- `pages` (required): An array of items or a function returning an array of items to show as pages\n- `root`: The root directory for the project.\n- `output`: Output directory for generated files.\n- `assets`: Directories containing the asset files.\n- `styles`: Additional CSS files to include in the HTML.\n- `scripts`: Additional JS files to include in the HTML.\n- `logo`: Logo image from assets to show in sidebar.\n- `colors`: Colors to use in the page. This is implemented using CSS variables and falls back to default grey colors on IE.\n  - `primary`: Primary color used in highlighted items, links etc.\n- `github`: Link to github folder to show edit button.\n- `port`: Port to run the server on.\n- `open`: Whether to open the browser window.\n\n### Format for pages\n\nEach item in your pages array can contain 3 properties:\n\n- `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.\n- `file` (required): absolute path to the file.\n- `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.\n\n## CLI\n\nTo serve docs with your config, run:\n\n```sh\nyarn component-docs serve\n```\n\nYou can also specify a glob of files to use as pages:\n\n```sh\nyarn component-docs serve \"*.{md,mdx}\"\n```\n\nThe CLI accepts several arguments. See `--help` for details.\n\n## API\n\nIf you want to use `component-docs` programmatically, you can use the exported `serve` and `build` functions.\n\nExample:\n\n```js\nimport path from 'path';\nimport { build } from 'component-docs';\n\nconst pages = [\n  { type: 'md', file: '../docs/Get Started.md' },\n  { type: 'mdx', file: '../docs/Contributing.mdx' },\n  { type: 'separator' },\n  { type: 'component', file: '../src/Button.js', }\n  { type: 'component', file: '../src/Calendar.js' },\n];\n\nbuild({\n  pages: pages.map(page =\u003e ({ ...page, file: path.join(__dirname, page.file) })),\n  output: path.join(__dirname, 'pages'),\n});\n```\n\nThe `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.\n\n## Extras\n\n### MDX support\n\n[MDX](https://mdxjs.com/) 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.\n\n### File references in Markdown\n\nYou 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.\n\nFor example:\n\n```md\n## Some heading\n\n​/../Details.md\n\nSome more text here.\n```\n\nHere, there is a reference to the `../Details.md` file. Its content will be inlined into the markdown file where it's referenced.\n\n### Specifying metadata\n\nDocuments can specify metadata such as the page `title`, `description` and `link` to use. The methods vary according to the type of the document.\n\nFor markdown documents, metadata can be specified in the YAML front-matter:\n\n```md\n---\ntitle: Home\ndescription: This is the homepage.\nlink: index\n---\n```\n\nFor MDX and React documents, metadata can be exported as a named export named `meta`:\n\n```js\nexport const meta = {\n  title: 'Home',\n  description: 'This is the homepage.',\n  link: 'index',\n};\n```\n\n## Example\n\n`component-docs` is used for [react-native-paper](https://callstack.github.io/react-native-paper)\n\n\u003c!-- badges --\u003e\n\n[build-badge]: https://img.shields.io/circleci/project/github/callstack/component-docs/master.svg?style=flat-square\n[build]: https://circleci.com/gh/callstack/component-docs\n[license-badge]: https://img.shields.io/npm/l/babel-test.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[version-badge]: https://img.shields.io/npm/v/babel-test.svg?style=flat-square\n[package]: https://www.npmjs.com/package/babel-test\n[linaria-badge]: https://img.shields.io/badge/styled_with-linaria-de2d68.svg?style=flat-square\n[linaria]: https://github.com/callstack/linaria\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Fcomponent-docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallstack%2Fcomponent-docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Fcomponent-docs/lists"}