Welcome to reframe/ui
reframe/ui, a beautiful and customizable UI library for Next.js. reframe/ui is a collection of high-quality, customizable, and accessible components that help you build modern, responsive, and visually appealing web applications. Built on top of Tailwind and shadcn/ui.
Philosophy
reframe/ui is designed to be a versatile and customizable library that can be used to build a wide range of applications. It is built on top of the powerful Tailwind framework, which provides a robust set of utility classes for styling and layout. We also use shadcn/ui, a library of customizable and accessible components, to ensure that your application is visually appealing and easy to use. It also guarantees a perfect design consistency accross all components, which is essential. While building this components, we had an 3 goals in mind:
Ease of use
Each component is as easy as importing a button, there by hiding the complexity of animations, designs, svg manipulation, maths, and more. All the components are ready made with explicit docs outlining the props and usage.
Quality
All the components here are top tier, excavated from awwwards winning websites and top SaaS appications out there. When your components are styled by Tailwind and shadcn/ui, and your animations powered by GSAP, Framer Motion and Three.js, You have nothing to worry about.
Performance
All the components are built with performance in mind. We use Framer Motion to create smooth animations and transitions, and Three.js for 3D animations. We also use GSAP for the most complex animations, which is a powerful animation library that provides a wide range of features and capabilities. We keep joggling around with these great tools to ensure that your application is lightning fast and responsive.
Access and Usage
Access
There a a few components in the free tier to get a taste of the library. But you can access all the components and templates through our Pro subscription. Check it out below.
Usage
You can use reframe/ui components in your Next.js project. Follow the installation guide on the next page.