DEV Community

Yuiko Ito
Yuiko Ito

Posted on • Updated on

I made 18 UI components for all developers

Hello guys,

Last week, I have developed ui-components.com.
You can find good UI components and copy the scss code just by one click.

Image from Gyazo

I updated this website and added new 18 Ui components.

website: https://ui-components.com
github: https://github.com/YuikoIto/ui-components

The updates are as follows.

  • Added new 4 button components
  • Added new 2 input components
  • Created the Text Animation page and added new 4 text animation components
  • Created the Arrow page and added 4 arrow components
  • Created the Speech Bubble page and added 4 speech bubble components
  • Bug fixes

Buttons

I added the following 4 buttons.

Image from Gyazo

Inputs

I added the following 2 inputs.

Image from Gyazo

Text Animations

I added the following 4 text animations.

Image from Gyazo

Tips:

I'm using 5 span tags to separate this Hello characters, but I didn't want to use for example &:nth-child(1) and &:nth-child(2)... Then I used @for.

This is really useful.

  @for $i from 1 through 5 {
    &:nth-child(#{$i + 1}) {
      $delay: $i * 0.1 + s;
      animation-delay: $delay;
    }
  }
Enter fullscreen mode Exit fullscreen mode

Arrows

I added the following 4 arrows.

image.png

This is easy, but I think it's a bit bothersome. So I added.

Speech Bubbles

I added the following 4 speech bubbles.

image.png

Bug fixes

The bug fixes is below.

  • When a modal was open, clicking anywhere would close the modal.

Before

Image from Gyazo

You may want to copy a part of the code while the modal is open, but before updating, no matter where you click in the modal, it closes.

After

Image from Gyazo

Then, I fixed.

πŸŒ–πŸŒ–πŸŒ–πŸŒ–πŸŒ–πŸŒ–πŸŒ–πŸŒ–
Thank you for reading!
I would be really grad if you use this website and give me any feedback!

🍎🍎🍎🍎🍎🍎

Please send me a message if you need.

🍎🍎🍎🍎🍎🍎

Discussion (0)