Find & Preview

This page explains how to find the right component in the component market and confirm it really works before downloading it.

Enter the component market

After starting the local service, click "Component Market" in the left menu. Each card in the list corresponds to a published component.

The top of the page offers four filters:

Filter	Meaning	When to use
Recommended	Ranking that combines usage and ratings	You have no specific target and want to browse
Latest	Reverse chronological order by publish time	You want to see the components the team shipped recently
Popular	Sorted by download count	You want components validated by many projects
All	No dependency-match filtering	You know the component exists but cannot find it in the first three lists

Why do some components only appear under "All"

The first three lists filter out components whose dependencies do not match your local environment. When a component is missing, switch to "All" to confirm it exists, then resolve the version issue via Dependency Matching.

What the card shows

• Name and author: a component name is unique within the same space; the author is the publisher.
• Description: the remarks filled in at publish time, for a quick judgement of purpose.
• Dependency tags: the third-party packages actually referenced by the component source.
• Stats: downloads, favourites and other usage signals.

Open the preview page

Click "Preview" on a card and the detail page opens in a new tab. The detail page has five areas:

1. Preview area: the component running for real, with mini / full-screen switching.
2. Documentation area: the rendered README.md, including props, events and usage examples.
3. Version selector: switch to historical versions and compare behaviour before downloading.
4. Dependency info: the dependencies the component declares, their local match status and any missing items.
5. Appearance control: switch the background colour to check how the component looks on light and dark backgrounds.

What to confirm while previewing

• The component renders under your current framework version (Vue 2 / Vue 3 / React).
• Interactions behave as expected, not just a good-looking static screenshot.
• Dependency status shows no red warning; yellow means a version difference you can keep an eye on.
• The props table in the README matches the actual behaviour.

What to do when a component does not show up

Check in this order:

1. Switch the filter to "All" and confirm the component really exists.
2. Open the component detail and check dependency status and missing items.
3. Install the missing dependencies in your local project and refresh the page.
4. When the version difference does not affect functionality, loosen the matching rules under "Settings → Preview Rules".

See Dependency Matching for the full rules and examples.

Next steps

• Download it once you have confirmed it works: Download & Use
• Want to change a version and re-publish: Update & Versioning