DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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.

🍎🍎🍎🍎🍎🍎

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: