✨New Animated UI Component Collection
Luka Donadze
Posted on May 25, 2024
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!
Posted on May 25, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.