Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a comprehensive component showcase page with preview for improved usability #441

Closed
UmbrellaCrow612 opened this issue May 24, 2023 · 8 comments
Labels

Comments

@UmbrellaCrow612
Copy link

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

Screenshot 2023-05-24 at 16 38 37
@colinricardo
Copy link

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

@UmbrellaCrow612
Copy link
Author

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
Copy link
Collaborator

shadcn commented May 25, 2023

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

@albbus-stack
Copy link

@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

FireShot Capture 039 - shadcn_ui - localhost
FireShot Capture 040 - shadcn_ui - localhost

@UmbrellaCrow612
Copy link
Author

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
Copy link

@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
Copy link

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

FireShot Capture 0h42 - shadcn_ui - localhost
FireShot Capture 042 - shadcn_ui - localhost

@shadcn
Copy link
Collaborator

shadcn commented Jun 30, 2024

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.

@shadcn shadcn closed this as completed Jun 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants