Frontend Resources

Bibliotecas essenciais para criar interfaces modernas e interativas

Ícones

Lucide React

Biblioteca de ícones clean e consistente para React

Instalação:

bun add lucide-react

Exemplo:

import { Heart } from 'lucide-react'

React Icons

Coleção massiva de ícones populares para React

Instalação:

bun add react-icons

Exemplo:

import { FaReact } from 'react-icons/fa'

Heroicons

Ícones feitos pela equipe do Tailwind CSS

Instalação:

bun add @heroicons/react

Exemplo:

import { HeartIcon } from '@heroicons/react/24/outline'

Animações & Efeitos

Framer Motion

Biblioteca de animações poderosa e fácil de usar

Instalação:

bun add framer-motion

Exemplo:

<motion.div animate={{ x: 100 }} />

Auto-Animate

Adiciona animações automáticas a mudanças de layout

Instalação:

bun add @formkit/auto-animate

Exemplo:

useAutoAnimate()

React Spring

Animações baseadas em física para React

Instalação:

bun add @react-spring/web

Exemplo:

const springs = useSpring({ from: { x: 0 }, to: { x: 100 } })

Componentes UI

Radix UI

Componentes acessíveis e não estilizados

Instalação:

bun add @radix-ui/react-dialog

Exemplo:

<Dialog.Root><Dialog.Trigger /></Dialog.Root>

Headless UI

Componentes UI sem estilo para Tailwind CSS

Instalação:

bun add @headlessui/react

Exemplo:

<Menu><Menu.Button /></Menu>

Chakra UI

Biblioteca de componentes simples e modular

Instalação:

bun add @chakra-ui/react @emotion/react

Exemplo:

<Button colorScheme='blue'>Button</Button>

Estilização

Tailwind CSS

Framework CSS utility-first

Instalação:

bun add -d tailwindcss

Exemplo:

className='bg-blue-500 hover:bg-blue-700'

Styled Components

CSS-in-JS com template literals

Instalação:

bun add styled-components

Exemplo:

const Button = styled.button`color: blue;`

Stitches

CSS-in-JS com foco em performance

Instalação:

bun add @stitches/react

Exemplo:

const Button = styled('button', { color: 'blue' })

Dicas de Boas Práticas

Performance

• Use lazy loading para componentes pesados
• Implemente code splitting
• Otimize imagens com next/image
• Use React.memo para componentes caros

Acessibilidade

• Use Radix UI para componentes acessíveis
• Adicione aria-labels adequados
• Garanta contraste adequado nas cores
• Teste navegação por teclado