Documentation

Future UI System

Everything you need to build high-end, animated interfaces with React and Next.js.

Introduction

Future UI is a collection of high-end, reusable components designed for modern web applications. Built with React, Tailwind CSS, and Framer Motion, our components are engineered for smooth performance and a premium aesthetic.

Copy-paste or CLI installation

Modern, Clean, and Minimal variants

Fully customizable color profiles

Production-ready responsiveness

Smooth Framer Motion animations

Zero external heavy dependencies

Installation

The easiest way to add components to your project is using our dedicated CLI. It handles the heavy lifting, creating the necessary files and utilities for you.

1. Initialize the CLI

Run the following command in your project root to prepare your workspace:

bash

npx futureuikit init

2. Add Components

Install specific components by their slug. For example, to add the Primary Button:

bash

npx futureuikit add primary

Manual Installation

Prefer manual control? You can click the Manual tab on any component page to see the full source code. Simply copy it into your components directory.

Customization

Most Future UI components support a robust variant and color system. This allows you to match the library to your brand identity with zero effort.

Using Variants

Pass the variant prop to switch between Modern, Clean, or Minimal styles:

javascript

<PrimaryButton variant="modern">Modern Style</PrimaryButton>
<PrimaryButton variant="clean">Clean Style</PrimaryButton>
<PrimaryButton variant="minimal">Minimal Style</PrimaryButton>

Custom Colors

Define any hex, RGB, or HSL color via the color prop:

javascript

<PrimaryButton color="#6366f1">Indigo</PrimaryButton>
<BasicLoader color="rgb(16, 185, 129)" />

Feedback & Toasts

Future UI includes a powerful, flexible toast notification system built with Radix UI and Framer Motion. It supports multiple positions, auto-dismissal, and custom actions.

1. Add the Toaster to your Layout

To use toasts, you must first add the Toaster component to your root layout (or app entry point):

javascript

// app/layout.tsx
import { Toaster } from "@/components/ui/toaster";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

2. Use the hook

Trigger toasts from any component using the useToast hook:

javascript

import { useToast } from "@/hooks/use-toast";

export default function MyComponent() {
  const { toast } = useToast();

  return (
    <button
      onClick={() => {
        toast({
          title: "Success!",
          description: "Your changes have been saved.",
          position: "bottom-right",
        });
      }}
    >
      Show Toast
    </button>
  );
}

License & Privacy

Completely Free

Future UI is 100% free for everyone.

All components in this library are released under the MIT License. You are free to use them in personal, educational, or commercial projects without any restrictions or attribution requirements.

Privacy Policy

We believe in a "Privacy by Design" philosophy. Future UI does not track you, collect your data, or use cookies. When you use the CLI, we only fetch the necessary component code from our public registry. Your code stays yours, and your project remains private.