Skip to content

docs: add guide for building a design system - #3686

Open
Adebesin-Cell wants to merge 3 commits into
chakra-ui:v2from
Adebesin-Cell:docs/design-system-guide
Open

docs: add guide for building a design system#3686
Adebesin-Cell wants to merge 3 commits into
chakra-ui:v2from
Adebesin-Cell:docs/design-system-guide

Conversation

@Adebesin-Cell

@Adebesin-Cell Adebesin-Cell commented Jul 24, 2026

Copy link
Copy Markdown
Collaborator

📝 Description

Adds a guide for building a design system as its own package and consuming it across apps — the panda lib +
designSystem workflow. New page under Guides, listed in the sidebar.

⛳️ Current behavior (updates)

The docs cover sharing styles through a preset, a static CSS file, or the build info file in the "Using Panda in a
component library" guide. There's no guide for the panda lib + designSystem workflow, and nothing documents that a
consumer generates only its own delta and re-exports the rest of the styled-system from the design system package.

🚀 New behavior

Adds guides/design-system and lists it in the sidebar. It walks the whole path:

  • Build a design system package: theme, components, and panda lib (which writes the dist/panda/ artifacts and syncs
    your package.json exports).
  • Consume it with one designSystem line, through the Vite plugin or PostCSS, including the entry CSS that puts the
    styles on the page.
  • Extend it: add local recipes, override design system values, and understand what stays virtual versus what regenerates.
  • Isolate output with prefix, keep the Panda major in lockstep, and read the conflict and export diagnostics.

The steps are grounded in the sandbox-design-system example and a real panda lib run.

💣 Is this a breaking change (Yes/No):

No. Docs only.

@changeset-bot

changeset-bot Bot commented Jul 24, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 73145c5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
panda-docs Error Error Jul 25, 2026 12:45pm

Request Review

@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown

@Adebesin-Cell is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

…guide

The design system guide (`panda lib` + `designSystem`) now owns the full
shared-design-system workflow, so make the component library page defer to it.

Keep the two cases it doesn't cover: shipping a preset, and shipping a static
CSS file for apps that don't run Panda. Drop the superseded external-package
(src files / build info) sections and FAQ, and point readers to the design
system guide instead.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant