Masked Components

A complete library of polymorphic components for React. Intelligent inputs, interactive buttons, and adaptive cards with modern design and a simplified API.

Install

See on GitHub

Go to GitHub

Polymorphic & Flexible

Components that adapt to any use case with a simple API and intuitive TypeScript for better DX.

Performance Optimized

Efficient rendering, optimized bundle size and zero unnecessary dependencies. Built for scale.

Modern Design

Contemporary styles with theme support, smooth animations and accessibility in mind.

Installation

Start using Masked Components in your project with a simple command.

bash

npx masked-components-cli

Basic Usage of MaskedInput

Simple example of using MaskedInput.

tsx


        import { MInput } from
        '../MaskedInput/MaskedInput'

        function MyForm() {
          const [value, setValue] = useState('')

          return (
            <MInput
              radius={4}
              variant="masked"
              label="Phone number"
              icon={<BsStars />}
              mask="(00) 0000-0000"
              placeholder="Telefone"
              value={phoneValue}
              onChange={v => setPhoneValue(v)}
            />
          )
        }

MaskedInput Variants

Inputs with intelligent masks and automatic formatting in real-time. Type into the fields below to test.

Input default

Value:

Input textarea

Value:

Input masked

Value:

Input password

Value:

Input select

Value:

Input file

Input search

Value:

Input currency

Value:

All masks are applied automatically as you type. Numbers are accepted and formatted in real-time.

MaskedInput with errors

Inputs with intelligent masks and automatic formatting in real-time. Type into the fields below to test.

Input default

Some error message

Value: No value

Input textarea

Some error message

Value: No value

Input masked

Some error message

Value: No value

Input password

Some error message

Value: No value

Input select

Some error message

Value: No value

Input search

Some error message

Value: No value

Input currency

Some error message

Value: No value

All masks are applied automatically as you type. Numbers are accepted and formatted in real-time.

Basic usage of MaskedButton

Simple example of using MaskedButton.

tsx


        <MaskedButton
          type="button"
          variant="default"
          state="default"
          size="sm"
          leftIcon={<FaCode />}
          rightIcon={<FaCode />}
          >
            Default
        </MaskedButton>

Masked Buttons

Buttons with multiple variants and states, including loading, disabled, and error. They support left and right icons and include an optional visual tooltip displayed via a label, enhancing user feedback and overall experience.

Variants

It's a default button

it's an outline button

it's a ghost button

it's a gradient button

it's a neon button

Go to google

Link

Toggle

States

It has an error

It's loading

It's disabled

It has an error

It's loading

It's disabled

It has an error

It's loading

It's disabled

It has an error

It's loading

It's disabled

It has an error

It's loading

It's disabled

It has an error

It's loading

It's disabled

Variant + Active

Clique para ativar

on / off

Clique para ativar

Icons

Clique para ativar

Link + leftIcon

Clique para ativar

Link + rightIcon

Clique para ativar

Sizes

It's a small default button

It's a medium default button

It's a large default button

It's a small outline button

It's a medium outline button

It's a large outline button

It's a small ghost button

It's a medium ghost button

It's a large ghost button

It's a small gradient button

It's a medium gradient button

It's a large gradient button

It's a small neon button

It's a medium neon button

It's a large neon button

It's a small link button

Link

It's a medium link button

Link

It's a large link button

Link

Shapes

It's a default button

It's a outline button

It's a ghost button

It's a gradient button

It's a neon button

Full Width

It's a full width button

Basic usage of MAnimation

Simple example of using MAnimation.

tsx


              <Div>
                <MAnimation trigger="hover" variant="blurIn" center>
                  <p>blurIn</p>
                </MAnimation>
              </Div>
              # or
              <MAnimation trigger="hover" variant="spin"  >
                <div>
                  <BsStars />
                  spin
                </div>
              </MAnimation>
              # or
              <div>

                <MButton variant="default" onClick={() => setOpen(!open)}>
                  Click here
                </MButton>

                <MAnimation trigger="controlled" variant="drawer" isOn={open}>
                  <Window>
                    Menu Content
                  </Window>
                </MAnimation>

              </div>

Masked Animations

A collection of reusable animations designed for modern UI interactions. Includes reveal animations, continuous motion effects, and controlled state-based animations.

Reveal Animations

blurIn

fadeInLeft

fadeInRight

fadeInUp

fadeInUpRotate

fadeOutDown

flipX

flipY

magneticRise

popElastic

rotateDrop

zoomFromDeep

Continuous Animations

spin

pulse

bounce

float

jumpRotate

horizontalLine

shakeX

skeleton

glow

InfinityGlowDiagonal

InfinityGlowGold

goldBorderPremium

State Based Animations

Menu Content

Masked Cards Soon

Features

Everything you need to create modern and functional interfaces.

TypeScript Native

Full typing and intelligent autocomplete.

Polymorphic & Flexible

Components that adapt to any use case with a simple and intuitive API.

Modern Design

Contemporary styles with theme support, smooth animations, and accessibility first.

Customizable

Easy to replace CSS classes and styles.

Responsive

Works perfectly on all devices.

Tree Shaking

Import only what you need.

Complete Documentation

Detailed examples and guides.

Optimized Performance

Efficient rendering, optimized bundle size, and zero unnecessary dependencies.

Lets Get Started

Install now and transform your formulas and interfaces with modern polymorphic components.

Install

Install Masked Components