DEV Community

Yuiko Koyanagi
Yuiko Koyanagi

Posted on • Updated on

I made 18 UI components for all developers

Hello guys,

Last week, I have developed
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.


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


I added the following 4 buttons.

Image from Gyazo


I added the following 2 inputs.

Image from Gyazo

Text Animations

I added the following 4 text animations.

Image from Gyazo


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


I added the following 4 arrows.


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

Speech Bubbles

I added the following 4 speech bubbles.


Bug fixes

The bug fixes is below.

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


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.


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.


Top comments (0)