✨New Animated UI Component Collection

Luka Donadze — Sat, 25 May 2024 14:39:23 +0000

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