✨New Animated UI Component Collection

Hello everyone 😊

I know that I'm not alone and you also struggle with UI design (Especially if you are a backend developer) and THERE IS NOTHING BETTER for a developer mental health than prepared UI solutions that look AWSOOOMEEE ✨

So, I decided to drop some components on my personal website https://ui.lukacho.com which originally I made for myself. Every component is made with tailwindcss and reactjs.

I would like to share some of them in this article. Feel free to suggest me what should I upload next.

!!RADIX ALERT!! None of components use radix-ui

Smooth Dropdown menu

Easy to implement, SMOOTH dropdown that uses only tailwind and framer-motion. Link to Dropdown

When I say easy, I mean this easy

import React from 'react'
import { Dropdown, Tabs, Tab, TriggerWrapper, Trigger } from './dropdown'
// just implement OurServices, Components and Blog, or copy from website
export const Dropdown = () => {
  return (
    <div className="flex h-96 w-full justify-start p-8 text-neutral-200 md:justify-center">
      <Dropdown>
        <TriggerWrapper>
          <Trigger>Our Services</Trigger>
          <Trigger>Components</Trigger>
          <Trigger>Blog</Trigger>
        </TriggerWrapper>
        <Tabs>
          <Tab>
            <OurServices />
          </Tab>
          <Tab>
            <Components />
          </Tab>
          <Tab>
            <Blog />
          </Tab>
        </Tabs>
      </Dropdown>
    </div>
  )
}

Animated Chart

You can come up with cool use cases for this component. Link to animated chart

Custom Cursor

Cursor made With Framer-Motion. Link to Custom cursor

Neo Brutalist Pricing Card

Actually, there are two of them) anyways, here's Link to pricing card

If you want to see more, please checkout website

Don't forget to comment what would you like to see next!