search

Clueless-Community / seamless-ui

The next gen UI made with simple HTML and Tailwind CSS. It's compatible with simple HTML, CSS static website or a React, Vue, Angular or Next.js Complex app. Zero JS and no-plugins installed.
https://seamlessui.vercel.app
MIT License
310 stars 266 forks source link

adding of kdb #2188

Open VenomFate-619 opened 1 year ago

VenomFate-619 commented 1 year ago

What is the motivation for adding/enhancing this feature?

A component to display keyboard shortcuts. image for preview purposes only not the actual design except

What are the acceptance criteria?

Can you complete this feature request by yourself?

Additional information

Rajdip019 commented 1 year ago

Sure looks cool.

It should also have different color option. Make a new directory called kdb and add the files there.

VenomFate-619 commented 1 year ago

hey I need some help. how should I structure the files and folder?

I want to show it in different sizes, and colors and some examples like how to use it within the text, how to use it with the icon, and more.

should we have a variant like a square box or a rounded corner?

seeing the existing files and folder I am unable to map how these files are going to map on docs and what pattern is followed to make files

Rajdip019 commented 1 year ago

@RavindraP04 can you help him?

RavindraP04 commented 1 year ago

Hey @VenomFate-619

Firstly Make a Folder with the name on Component in this branch :- https://github.com/Clueless-Community/seamless-ui/tree/main

Like the Folder Structure can look like this :-

Inside KDB>src you can keep all the components of different sizes and colors with proper naming, like for different sizes and colors :-

You can change the name of the color in the file name.

For varients like square and rounded, also you can name them like:-

In the README.md you can add the screenshot of the components in such a way that when a user clicks on the image, it redirects to the code of that component For Reference:- https://github.com/Clueless-Community/seamless-ui/blob/main/Buttons/README.md

In the Design System mdx file you can Write all the guideline on how you designed it, How to implement it or some examples like how to use it within the text, how to use it with the icon, and more. For Reference:- https://github.com/Clueless-Community/seamless-ui/blob/main/Buttons/buttons.design-system.mdx

After adding the component in the main branch, you can move forward to add the components in the website in the website-dev branch

Will add the steps to add these things in website soon...