Introdcution
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
UI-LAYOUT is a collection of reusable components, each with a bunch of examples in different styles that can be used in various positions. I wondered how users would enjoy the journey of scrolling through a website if they didn't feel there was something special about it.
Installation
You must install tailwindcss
. As most of our components use framer-motion
install it too.
npm install framer-motion clsx tailwind-merge
Must Add it in the utils.ts
:
1import { type ClassValue, clsx } from 'clsx';2import { twMerge } from 'tailwind-merge';34export function cn(...inputs: ClassValue[]) {5return twMerge(clsx(inputs));6}
use this hooks for mediaQueries:
1import { useEffect, useState } from 'react';23export function useMediaQuery(query: string) {4const [value, setValue] = useState(false);56useEffect(() => {7function onChange(event: MediaQueryListEvent) {8setValue(event.matches);9}1011const result = matchMedia(query);12result.addEventListener('change', onChange);13setValue(result.matches);1415return () => result.removeEventListener('change', onChange);16}, [query]);1718return value;19}
Motivation
The main reason for creating this component was to help myself. I've been creating web pages for the last couple of years and love building websites that are reactive and user-friendly. Some components are really reusable for different websites, and I have to search through files to find the code and it's really annoying. So, I thought, what if I create something where all of my animations or components will be in one place?
I gained hope and belief after seeing component libraries like https://ui.shadcn.com and https://ui.aceternity.com I want to give them credit for encouraging me to create free components library like this.
I want to thank https://magicui.design and https://x.com/jakubkrehel for what they have done. When I first completed some components, I realized that I needed to make text animations. Then I discovered MagicUI already have done it, and they had a bunch of components that I wanted to create myself. So, thanks again! 🔥