reframe/ui
reframe/ui

Command Palette

Search for a command to run...

Installation Guide

First it's important to understand that reframe/ui heavily relies on powerful libraries like Tailwind and design systems like shadcn/ui. Keeping a consistent and customizable design system is the core of reframe/ui. Let's jump right in.

1
Setup your Next.js project with Tailwind CSS and Typescript preferably.

You can follow the installation guide from the Next.js website. If you are not using Nextjs, you will need to install tailwindcss. When you are done come back to this page and continue.

2
Setup shadcn/ui and tweak it

You can follow the installation guide from the shadcn/ui website. We recommend you add all shadcn components to avoid any time wasting later on. If you need to customize your theme, you can use a tool called tweakcn. When you are done come back to this page and continue.

3
Install Dependecies

Make sure you install all depencies for the component you want to use. There will always be an installation command available on the component page. Copy and paste the command to your terminal and run it.

4
Copy and Paste the component in your code base
@/components/reframe-ui/text-parallax.tsx
5
Import the component in your app
© Copyright 2025. All rights reserved.Built by @thommysart