Lucode Starlight Theme is an Astro Starlight theme plugin that recreates the design of shadcn/ui's documentation site, letting you give any Starlight-powered docs project the same clean, component-library aesthetic.
What is Lucode Starlight Theme?
Lucode Starlight Theme is a theme for Astro Starlight, published on npm as lucode-starlight, which restyles Starlight documentation sites to match the visual design of shadcn/ui's documentation (as of April 2026). It is developed by Lucas Labs, available on GitHub at lucas-labs/lucode-starlight-theme, and built on top of adrian-ub/starlight-theme-black as a base. The theme takes a standard Starlight project and outputs a docs site with shadcn/ui-inspired typography, layout, and components.
Key Features
- shadcn/ui-inspired design — Recreates the look of shadcn/ui's documentation site as of April 2026, including layout, spacing, and overall visual tone.
- Astro Starlight integration — Installs as a Starlight theme plugin, so it works with Starlight's existing content collections, sidebar navigation, and search.
- Published on npm — The package is named
lucode-starlightand can be installed from the npm registry. - Bun workspace monorepo — The repository is a Bun workspace containing two directories:
packages/lucode-starlightfor the theme anddocsfor the documentation site. - Live preview documentation — The
docsfolder is a working Starlight site that uses the local theme package, serving as both the theme's documentation and a live demo of the design. - Built from a proven base — Extends the earlier shadcn/ui-inspired
starlight-theme-blacktheme by adrian-ub, rather than starting from zero.
Who is it for?
- Documentation maintainers — who want a polished, developer-focused look for their project docs without designing a custom theme.
- Astro and Starlight users — who already use Starlight and want to change the visual style by adding a theme plugin.
- Theme developers — who can study the Bun workspace structure and the theme package layout as a reference for building other Starlight themes.
What can you do with Lucode Starlight Theme?
- Project maintainers: apply the theme to a Starlight docs site to instantly adopt the shadcn/ui documentation aesthetic.
- Design-conscious teams: ship product or API documentation with a clean, modern, component-library-style look.
- Solo developers: publish docs that visually stand out from the default Starlight appearance.
Alternatives
- starlight-theme-black — the earlier Astro Starlight theme by adrian-ub that this theme is based on.
- Default Astro Starlight theme — the built-in styling that ships with Starlight, which Lucode replaces.
FAQ
What does Lucode Starlight Theme do?
Lucode Starlight Theme restyles Astro Starlight documentation sites to match shadcn/ui's documentation design. You add it as a Starlight theme plugin, and your existing Starlight content is rendered with the shadcn/ui-inspired visual style.
Is Lucode Starlight Theme compatible with Astro Starlight?
Yes. The theme is built specifically for Astro Starlight and is installed as a Starlight theme, so it works with Starlight's content collections, sidebar, and other built-in features.
What is Lucode Starlight Theme based on?
It is based on the earlier starlight-theme-black theme by adrian-ub, which also brought a shadcn/ui-inspired design to Astro Starlight. Lucode extends and updates that approach to match shadcn/ui's documentation as of April 2026.
Where can I see a live preview?
The repository includes a docs directory that is a working Starlight site using the theme locally. It is available at the preview/docs link on the GitHub repository (lucas-labs.github.io/lucode-starlight-theme).
