# Starlight component ideas Spent some time auditing components in-use in the Astro docs and available in other docs tools to see what’s out there that we could consider adding to Starlight. ## Astro Docs components ### Strong contenders - `FileTree` — have always intended to add this to Starlight, and we have an open PR from @HiDeoo: https://github.com/withastro/starlight/pull/1308 - A way to use asides outside of Markdown/MDX’s `:::note` syntax. Would be helpful for people building custom Astro components that want to show these, and would also make it easier to add aside support to Markdoc. - `Badge` — we have designs for this in Figma and a very similar component is in-use internally for badges in Starlight’s sidebar. Would need some small refactoring work to make robust for use inline in content. - `Button`/call-to-action — Starlight’s hero uses a call-to-action design, but we’ve never polished this up to have a sensible API for use inline (similar to badge). Also has designs in Figma. ### Potentially - [`MultipleChoice`](https://github.com/withastro/docs/blob/main/src/components/tutorial/MultipleChoice.astro) + [`Option`](https://github.com/withastro/docs/blob/main/src/components/tutorial/Option.astro) — more complex than some of these, but the most effective standalone tutorial component users could slot into content. Needs a reasonable chunk of JS, so given ongoing tree-shaking issues with our components barrel file, introducing this would probably mean we should break that up. ### Others - [`Version`](https://github.com/withastro/docs/blob/main/src/components/Version.astro) — used to display the latest version of an npm package, i,e, `<Version pkgName="@astrojs/starlight" />`. Risk: many potential registries for many different languages could be a vector for infinite requests for support. [Crates.io](https://crates.io/data-access) (Rust), [PyPi](https://warehouse.pypa.io/api-reference/json.html#project) (Python), [RubyGems](https://guides.rubygems.org/rubygems-org-api/#gem-methods), and [Packagist](https://packagist.org/apidoc#get-package-data) (Composer/PHP) all have APIs that could be used for example, but more requests could come in, alternative registry support etc. - [`Since`](https://github.com/withastro/docs/blob/main/src/components/Since.astro) — used to display an “Added in: vX” message and checks the npm registry to automatically add “New” or “Beta” badges. Similar risks to `Version`, where support for other package managers/registries would be likely wanted by users. - [`ReadMore`](https://github.com/withastro/docs/blob/main/src/components/ReadMore.astro) — simple icon + link lock-up. It’s quite simple to build, so not 100% sure if it warrants a dedicated built-in component. ## Components from other docs tools ### VitePress - Includes a [team page component](https://vitepress.dev/reference/default-theme-team-page) for displaying a grid of contributor/team avatars and information (project role, social links, sponsor buttons etc.) - Also has a (as far as I can tell, undocumented) [sponsors grid](https://github.com/vuejs/vitepress/blob/963b3b81bc309a202d6dd1ccd590655354e7ecd6/src/client/theme-default/components/VPSponsors.vue) component we’ve previously heard from some Starlight uses about. (Visible on the [Vite homepage](https://vitejs.dev/) and in its docs’ sidebar.) ### Docusaurus - Supports [autogenerating a grid of link cards](https://docusaurus.io/docs/sidebar/items#generated-index-page) based on a specific directory (not exactly a component in their API, but would likely be one in Starlight’s). - Supports client-side rendering of Mermaid diagrams with a plugin. We know there’s interest in this, but would want to render on the server and that’s kind of painful. Hoping a community member tries to build this as a third-party package to be honest. ### Nextra - [Steps component](https://nextra.site/docs/guide/built-ins/steps) — basically a prettily styled `<ol>`, used by wrapping headings in `<Steps>`. ### Vocs - Also has a [steps component](https://vocs.dev/docs/markdown#steps), used by wrapping headings in `::::steps`.