adding of kdb

[VenomFate-619]

What is the motivation for adding/enhancing this feature?

A component to display keyboard shortcuts.

for preview purposes only not the actual design except

What are the acceptance criteria?

• multiple size options
• style should be such that it can be used in between text

Can you complete this feature request by yourself?

• YES
• NO

Additional information

[Rajdip019]

Sure looks cool.

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

[VenomFate-619]

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]

@RavindraP04 can you help him?

[RavindraP04]

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 :-

• KDB [Folder]
  • src [Folder]
    • components.html
  • README.md
  • kdb.design-system.mdx

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

• kdb-sm-white.html
• kdb-md-white.html
• kdb-lg-white.html

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

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

• kdb-sm-white-rounded.html
• kdb-sm-white-square.html
  Just send some sample before making these, then we can discuss on it

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...