Trusted by 1,500+ Figma users for seamless design!

Design & Development|
perfectly aligned

Flexible components, consistent UI, quick development, easy integration.

Built for React

Styled with TailwindCSS

Get Started-It’s free

alignui-library

V1.0

Use desktop for editor

To access the code editor, please open
using a desktop computer.

alignui.com

alignui-library

V1.0

button.tsx

preview

import * as Button from './components/button';
import {
  RiArrowLeftSLine,
  RiArrowRightSLine
} from '@remixicon/react';

export default function App() {
  return (
    <div className='flex min-h-screen flex-col items-center justify-center gap-4'>
      <Button.Root variant='primary' mode='filled'>
        <Button.Icon as={RiArrowLeftSLine} />
          Learn More
        <Button.Icon as={RiArrowRightSLine} />
      </Button.Root>

      <Button.Root variant='primary' mode='stroke'>
        <Button.Icon as={RiArrowLeftSLine} />
          Learn More
        <Button.Icon as={RiArrowRightSLine} />
      </Button.Root>

      <Button.Root variant='primary' mode='lighter' asChild>
        <a href='#'>
          <Button.Icon as={RiArrowLeftSLine} />
            Learn More
          <Button.Icon as={RiArrowRightSLine} />
        </a>
      </Button.Root>

      <Button.Root variant='primary' mode='ghost'>
        <Button.Icon as={RiArrowLeftSLine} />
          Learn More
        <Button.Icon as={RiArrowRightSLine} />
      </Button.Root>
    </div>
  );
}

Rapid Development

Make your customer happy
by building faster

Rapidly build unique designs with our adaptable component library.

preview

import { RiEyeLine } from '@remixicon/react';

import * as FancyButton from '@/ui/fancy-button';
import * as LinkButton from '@/ui/link-button';
import * as Input from '@/ui/input';
import * as Label from '@/ui/label';


export function LoginPage() {
  return (
    <div className='flex w-full max-w-[400px] shrink-0 flex-col gap-5 bg-bg-white-0 p-7'>
      <img src='/images/logo/apex.svg' alt='' className='mx-auto size-14' />
      <div className='text-center'>
        <div className='text-title-h6 text-text-strong-950'>Welcome back</div>
        <div className='text-paragraph-sm text-text-sub-600'>
          Please enter your details to login.
        </div>
      </div>

 
      <div className='flex flex-col gap-3'>
        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='email'>Email Address</Label.Root>
          <Input.Root>
            <Input.Wrapper>
              <Input.Input
                id='email'
                type='email'
                placeholder='[email protected]'
              />
            </Input.Wrapper>
          </Input.Root>
        </div>

        <div className='flex flex-col gap-1'>
          <div className='flex items-center justify-between'>
            <Label.Root htmlFor='password'>Password</Label.Root>
            <LinkButton.Root variant='gray' size='small'>
              Forgot?
            </LinkButton.Root>
          </div>
          <Input.Root>
            <Input.Wrapper>
              <Input.Input
                id='password'
                type='password'
                placeholder='••••••••••'
              />
              <button type='button'>
                <RiEyeLine className='size-5 text-text-soft-400' />
              </button>
            </Input.Wrapper>
          </Input.Root>
        </div>
      </div>

      <FancyButton.Root
>Login</FancyButton.Root>


      <div className='flex justify-center gap-1 text-paragraph-sm text-text-sub-600'>
        Don’t have an account?
        <LinkButton.Root variant='black' size='medium'>
          Register
        </LinkButton.Root>
      </div>
    </div>
  );
}

Welcome back

Please enter your details to login.

Email Address

Password

Don’t have an account?

Core Features

What's inside AlignUI?

500+ flexible components with developer-friendly, comprehensive codebase for rapid development.

180+ Components

180+ versatile UI elements for rapid development.

Production Ready

Pre-optimized code for instant project deployment.

Figma File

Comprehensive design kit for seamless UI/UX workflow.

Customizable

Highly flexible system for unique brand expression.

Responsive

Adaptive layouts for multi-device compatibility.

Easy for Devs

Intuitive framework for rapid and efficient development.

Dark Mode

Effortless integration for enhanced user experience.

TypeScript

Strong typing for enhanced code maintainability.

Accessible

WCAG-compliant design for inclusive user access.

Customization & Flexibility

Unlimited customization options
for your unique needs

Easily customizable components that adapt to your project needs.

Primary colors

Theme options

Corner radius

alignui.com

reset-password.tsx

preview

export default function ResetPassword() {
  return (
    <>
      {/* ... */} 

      <Input.Root className=''>
        <Input.Wrapper>
          <Input.Icon as={RiMailLine} />
          <Input.Input type='email' placeholder='[email protected]' />
        </Input.Wrapper>
      </Input.Root>

      {/* ... */}

      <FancyButton.Root
        className=''
        variant='primary'
      >
        Reset Password
      </FancyButton.Root>

      {/* ... */}
    </>
  );
}

:root {
  /* ... */

  --primary-dark: var(--blue-800);
  --primary-darker: var(--blue-700);
  --primary-base: var(--blue-500);
  --primary-alpha-24: var(--blue-alpha-24);
  --primary-alpha-16: var(--blue-alpha-16);
  --primary-alpha-10: var(--blue-alpha-10);

  /* ... */
}

export default function Layout() {
  return (
    <html lang='en' className=''>
      <head>
        {/* ... */}
      </head>
      <body>
        {/* ... */}
      </body>
    </html>
  );
}