Repolode
Submit
ui-layouts

ui-layouts/uilayouts

A React and Tailwind CSS component library of animated UI components, effects, and ready-made blocks built on Framer Motion, distributed in a shadcn-style setup.

View on GitHubWebsite
Stars
3,808
Forks
228
Open issues
10
Last commit
2 months ago

What is it?

UI Layouts is an open-source component library for building websites with creative, animated interfaces. Its components cover effects such as sparkles, spotlight, mouse trails, and image ripples, along with common controls like accordions, drawers, modals, carousels, sliders, file upload, and password fields.

Most components are written in TypeScript for React and styled with Tailwind CSS, and many rely on Framer Motion for animation. Setup requires installing Tailwind, the motion package, and clsx with tailwind-merge, plus adding a small `cn` helper and a media query hook. The project also hosts a Labs section for experimental components.

The library is aimed at developers and designers who want polished, motion-heavy UI pieces without building the effects from scratch.

Key features

  • 01Animated effect components such as sparkles, spotlight, mouse trail, and image ripple.
  • 02Common UI controls including accordion, drawer, modal, carousel, range slider, and file upload.
  • 03Built for React with TypeScript and styled using Tailwind CSS.
  • 04Animations are implemented with Framer Motion (motion package).
  • 05Ready-to-use blocks and an experimental Labs section.

Use cases

  • Adding animated hero sections or visual effects to a marketing landing page.
  • Building interactive controls like file uploads, sliders, or tag inputs in a React app.
  • Prototyping creative portfolio sites with motion-rich components.

Topics

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

FAQ

What is uilayouts?
A React and Tailwind CSS component library of animated UI components, effects, and ready-made blocks built on Framer Motion, distributed in a shadcn-style setup. UI Layouts is an open-source component library for building websites with creative, animated interfaces. Its components cover effects such as sparkles, spotlight, mouse trails, and image ripples, along with common controls like accordions, drawers, modals, carousels, sliders, file upload, and password fields.
Is uilayouts free to use? What license does it have?
uilayouts is open source under the MIT license. Check the license terms before using it in commercial products.
Is uilayouts still maintained?
Updated within 6 months. The last commit to uilayouts was on Aug 23, 2026.
What can I use uilayouts for?
Adding animated hero sections or visual effects to a marketing landing page. Building interactive controls like file uploads, sliders, or tag inputs in a React app. Prototyping creative portfolio sites with motion-rich components.
Where can I get uilayouts?
The source code and installation instructions are on GitHub: https://github.com/ui-layouts/uilayouts

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects