⚡ 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;
Sign in to Example
Welcome back! Please sign in to continue
Many variants. 🙌
Select a variant to switch.
Customizable with classes.
Octa UI components empowering you
to customize with ease through intuitive classes.
TypeScript based
Build type safe applications, Octa UI has a fully-typed API to minimize the learning curve, and help you build applications.
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.