🎉 Ship faster with beautiful components

Make beautiful websites regardless
of your design experience.

Beautiful, fast and modern React UI library.
Plus

⚡ Fast

Built on top of Tailwind CSS, which means no runtime styles, and no unnecessary classes in your bundle.

🧠 Unique DX

Octa UI is fully-typed to minimize the learning curve, and provide the best possible developer experience.

✨ Themeable

Provides the ability to customize default themes, you can change all semantic tokens or create an entire new theme.

Ship your MVP fast 🌐

With beautiful out of the box components.

import React from "react";
import { Button, Input } from "octa-ui";
import "octa-ui/dist/style.css";

const SignIn = () => {
  return (
    <div className="flex flex-col items-center">
      <h1 className="font-bold mt-6">Sign in to Example</h1>
      <p className="text-[#656565] mt-1 text-sm">
        Welcome back! Please sign in to continue
      </p>
      <div className="flex flex-row items-center space-x-2 mt-7">
        <Button variant={"outline"} className="w-[165px]">
          <img src="/svg/google.svg" alt="Google" className="h-5 w-5 mr-2" />
          <span>Google</span>
        </Button>

        <Button variant={"outline"} className="w-[165px]">
          <img
            src="/svg/github-dark.svg"
            alt="Github"
            className="h-5 w-5 mr-2 "
          />
          <span>GitHub</span>
        </Button>
      </div>
      <div className="flex flex-row items-center space-x-3 mt-5 mb-6">
        <hr className="w-[150px]" />
        <span className="text-[#a7a7a7] text-sm">or</span>
        <hr className="w-[150px]" />
      </div>
      <Input label="Email" className="w-[340px]" />
      <Button variant={"materialSecondary"} className="mt-5 w-[340px]">
        Continue
      </Button>
    </div>
  );
};

export default SignIn;
Logo

Sign in to Example

Welcome back! Please sign in to continue

or
Don't have an account?Sign up
Built with Logo Octa UI

Many variants. 🙌

Select a variant to switch.

More

Customizable with classes.

Octa UI components empowering you
to customize with ease through intuitive classes.

TS

TypeScript based

Build type safe applications, Octa UI has a fully-typed API to minimize the learning curve, and help you build applications.

TS

No runtime styles

Octa UI is based on Tailwind CSS, it means that there are no runtime styles, and no unnecessary classes in your bundle.

Product A

StarStarStarStarStar(44)
$1200$1600

Fastest ReactJS,
UI library.

Octa UI
NPM
NextJS
React
Plus

Wall of Love

We are deeply connected to our users, collaborating with them daily to enhance Octa UI. Every brand leveraging Octa UI continues to flourish, and we provide unwavering support every step of the way.