Add a comprehensive component showcase page with preview for improved usability

[UmbrellaCrow612]

Issue Description:

Currently, the shadcn/ui component library offers a wide range of high-quality components for integration into various projects. However, there is a missing feature that hampers the usability and discoverability of these components. It lacks a centralized page that lists every component in a visually appealing card grid style with a preview. This issue proposes the addition of a comprehensive component showcase page to enhance user experience and make it easier for developers to explore and utilize the available components efficiently.

Issue Details:

The current state of the shadcn/ui component library is quite impressive, with a diverse set of components to choose from. However, when it comes to discovering and selecting the right components for a project, developers face challenges due to the absence of a centralized showcase page.

The proposed solution is to create a new page, preferably named "Component Showcase," that displays an organized grid of cards representing each component. Each card should include a visual preview of the component along with its name. Clicking on a card should lead the user directly to the documentation or detailed information about that specific component.

Benefits:

• Improved Usability: The component showcase page will provide developers with a comprehensive overview of all available components in a single place. This will make it significantly easier to browse through the component library and quickly locate the desired components, saving valuable time and effort.

• Enhanced Visual Representation: By incorporating visual previews within the card grid style, developers can have a better understanding of how each component looks and behaves. This will aid in the decision-making process, ensuring that the selected components align with the desired design and functionality requirements.

• Efficient Navigation: With the ability to click on a component card and be directed to its corresponding documentation or details, developers can access specific information more efficiently. This seamless transition from the showcase page to the component's dedicated page will streamline the integration process and facilitate a smoother workflow.

• Promotion of the Component Library: The addition of a user-friendly component showcase page will serve as an excellent promotional tool for the shadcn/ui library. By showcasing the library's capabilities and visual appeal, it will attract more developers, increase adoption, and contribute to its overall popularity within the developer community.

The addition of this component showcase page will greatly enhance the shadcn/ui library, making it more accessible and user-friendly for developers. It will empower them to explore and utilize the components more efficiently, ultimately improving the overall development experience.

Example

[colinricardo]

have you seen this? https://ui.shadcn.com/sink

[UmbrellaCrow612]

have you seen this? https://ui.shadcn.com/sink

Sure, but there not in any order which can be easily referenced as to what is being used, and where to find the material.

The image i referenced is what the page could be turned into as to provide a more developer friendly experience to find the name of the component and a easily clickable card that takes you there.

[shadcn]

@UmbrellaCrow612 Thanks for putting this together. I've been looking into this. I'll keep you posted on updates.

[albbus-stack]

@shadcn I've implemented a basic card grid in this commit, the result is not great but it's a start. All the components are still interactable and each of one of them has a clickable card header with the name and a short description. All the links and descriptions are to be implemented. Let me know if I'm on the right track and I will finish this task.

Screenshots of dark & light mode

[UmbrellaCrow612]

You could go either way for DX, having the actual component there or a placeholder type image that represents it. Similar to the image I provided.

[albbus-stack]

@UmbrellaCrow612 Yeah probably images are for the best. I do think that with a little bit of work on some demo widgets for this page specifically (i.e. shrinking the ones that are too tall or have too much content) the result would be fine. The fact that you can interact briefly with the component before opening its spec to me it's an added bonus.

[albbus-stack]

Tidied up some widgets to make a more uniform grid in the latest commit. Here are the results:

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.