Introduction
Overview of Prime UI, how the content system works, and where to start.
What Prime UI includes
Prime UI is a Next.js project that ships with a content-driven website out of the box:
- Marketing pages and app routes
- Blog, docs, changelog, and legal pages powered by Markdown/MDX
- A small set of MDX components (cards, grids, steps, tabs, and more) to keep pages consistent
Start here
If you are new to the repo, follow the first two guides in order. If you are editing content, jump straight to the content authoring section.
Installation
Install dependencies, run the dev server, and verify everything works locally.
Read installationConfiguration
Learn where settings live and how to customize the site structure and content.
Read configurationContent authoring
Where docs/blog/changelog/legal files live and how to edit them safely.
Explore contentMDX components
Use cards, tabs, steps, and admonitions in a consistent way across docs.
See componentsHow the docs are organized
Documentation is intentionally split into small pages. Each section has an index page that explains what the section is for and links to the most important sub-pages.
This keeps each doc focused on one job: explain a concept, show an example, and point you to the next best place to read.
Editing workflow
Most docs changes are just editing Markdown. When you add a new page, keep the slug stable and update meta.json only when you want explicit ordering in the sidebar.
- 1
Edit an existing page
Open a
.mdfile undersrc/content/docs, update the content, and refresh the docs route to verify rendering. - 2
Add a new page
Create a new
.mdfile (or a folder with anindex.md) and add a shorttitleandexcerptin frontmatter. - 3
Update the sidebar
If the page should appear in a specific order, update the nearest
meta.jsonfile for that folder.
Conventions
To keep the documentation consistent and easy to scan, follow a few simple conventions across pages.
- Keep pages focused on one topic
- Use
##headings to break up long sections - Add a short paragraph before code blocks, components, and lists
- Prefer shared MDX components (Cards, Steps, Tabs) over one-off formatting
This documentation is MDX. Use ## and deeper headings in content files (the page title is rendered automatically).