Repolode
Enviar
ui-layouts

ui-layouts/uilayouts

Biblioteca de componentes para React e Tailwind CSS com componentes, efeitos e blocos prontos de UI animados, baseada em Framer Motion e distribuída em um formato no estilo shadcn.

Ver no GitHubSite
Estrelas
3,808
Forks
228
Issues abertas
10
Último commit
há 2 meses

O que é?

UI Layouts é uma biblioteca de componentes open source para criar sites com interfaces criativas e animadas. Seus componentes incluem efeitos como sparkles, spotlight, rastros do mouse e ondulações em imagens, além de controles comuns como accordions, drawers, modals, carousels, sliders, upload de arquivos e campos de senha.

A maioria dos componentes é escrita em TypeScript para React e estilizada com Tailwind CSS; muitos usam Framer Motion para animações. Para configurar o projeto, é preciso instalar Tailwind, o pacote motion e clsx com tailwind-merge, além de adicionar um pequeno helper `cn` e um hook para media queries. O projeto também tem uma seção Labs para componentes experimentais.

A biblioteca é voltada a desenvolvedores e designers que querem elementos de UI refinados e cheios de movimento sem precisar criar os efeitos do zero.

Recursos principais

  • 01Componentes de efeitos animados, como sparkles, spotlight, rastros do mouse e ondulações em imagens.
  • 02Controles comuns de UI, incluindo accordion, drawer, modal, carousel, slider de intervalo e upload de arquivos.
  • 03Feita para React com TypeScript e estilizada com Tailwind CSS.
  • 04Animações implementadas com Framer Motion (pacote motion).
  • 05Blocos prontos para uso e uma seção Labs experimental.

Casos de uso

  • Adicionar seções hero animadas ou efeitos visuais a uma landing page de marketing.
  • Criar controles interativos, como upload de arquivos, sliders ou campos de tags, em um app React.
  • Prototipar sites de portfólio criativos com componentes repletos de animações.

Tópicos

#react#tailwindcss#component-library#framer-motion#animation#typescript#ui-components#accertinity#accordion-component#animated-tabs

Perguntas frequentes

O que é uilayouts?
Biblioteca de componentes para React e Tailwind CSS com componentes, efeitos e blocos prontos de UI animados, baseada em Framer Motion e distribuída em um formato no estilo shadcn. UI Layouts é uma biblioteca de componentes open source para criar sites com interfaces criativas e animadas. Seus componentes incluem efeitos como sparkles, spotlight, rastros do mouse e ondulações em imagens, além de controles comuns como accordions, drawers, modals, carousels, sliders, upload de arquivos e campos de senha.
uilayouts é gratuito? Qual é a licença?
uilayouts é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
uilayouts ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de uilayouts foi em 23 de ago. de 2026.
Para que posso usar uilayouts?
Adicionar seções hero animadas ou efeitos visuais a uma landing page de marketing. Criar controles interativos, como upload de arquivos, sliders ou campos de tags, em um app React. Prototipar sites de portfólio criativos com componentes repletos de animações.
Onde consigo uilayouts?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ui-layouts/uilayouts

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados