DhiWise React Builder- The Webflow Alternative for React Devs

Connect your designs

Sync designs from the most popular design platforms, or choose from our wide range of beautifully designed templates to jumpstart your project.

Figma

Import your designs using Figma URL or use our Figma to code plugin.

How to import

100+ Templates

Our templates have pre-built navigations, authentication, and much more.

Find template

Develop your app

Empower your React JS/TS development with a Smart Editor and effortlessly manage components, navigation, data binding, and responsiveness in your applications.

Design responsively

Easily preview and adjust layouts for the wide array of viewports.

<div className="flex items-start justify-start sm:px-[20px] md:px-[40px] px-[75px] w-[100%]">
  <div className="flex flex-col gap-[53px] items-center justify-start max-w-[1290px] mx-[auto] w-[100%]">
      <div className="flex flex-col gap-[13px] items-center justify-start w-[100%]">
      <Text
          className="font-bold font-raleway text-black_900 text-center tracking-[-0.50px] w-[auto]"
          as="h2"
          variant="h2"
      >
          Meet Our Team
      </Text>
      <Text
          className="font-normal font-rubik not-italic text-center text-gray_500 tracking-[-0.50px] w-[auto]"
          variant="body1"
      >
          We write various things related to furniture, from tips and what
          things I need to pay attention to when choosing furniture
      </Text>
      </div>
      <div className="flex items-start justify-start w-[100%]">
      <Slider
          autoPlay
          autoPlayInterval={2000}
          activeIndex={sliderState}
          responsive={{
          0: { items: 1 },
          550: { items: 2 },
          1050: { items: 3 },
          }}
          onSlideChanged={(e) => {
          setsliderState(e?.item);
          }}
          ref={sliderRef}
          className="gap-[20px] w-[100%]"

          items={[...Array(9)].map(() => (
          <React.Fragment key={Math.random()}>

              <TeamCard
              className="flex flex-col items-start justify-start mx-[10px]"
              profilePic="images/img_rectangle1487_450x416.png"
              name="Make Jhane"
              designation="Finance Manager"
              />
          </React.Fragment>
          ))}
          renderDotsItem={({ isActive }) => {
          if (isActive) {
              return (
              <div className="inline-block cursor-pointer rounded-[50%] h-[15px] bg-bluegray_900 w-[15px]" />
              );
          }
          return (
              <div
              className="inline-block cursor-pointer rounded-[50%] h-[15px] bg-gray_200 w-[15px]"
              role="button"
              tabIndex={0}
              />
          );
          }}
      />
      </div>
      <PagerIndicator
      className="flex gap-[15px] h-[15px] items-start justify-start self-stretch w-[75px]"
      count={3}
      activeCss="inline-block cursor-pointer rounded-[50%] h-[15px] bg-bluegray_900 w-[15px]"
      activeIndex={sliderState}
      inactiveCss="inline-block cursor-pointer rounded-[50%] h-[15px] bg-gray_200 w-[15px]"
      sliderRef={sliderRef}
      selectedWrapperCss="inline-block"
      unselectedWrapperCss="inline-block"
      />
  </div>
</div>

Create reusable components

Turn nav bars, footers, signup forms, and more into components that you can reuse, maintain, create variations of, or modify on-the-fly across your whole website with as little as one click.

import React from "react";
    export type ButtonProps = Omit<
      React.DetailedHTMLProps<
        React.ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement>,
      "onClick"
    > &
      Partial<{
        className: string;

        leftIcon: React.ReactNode;
        rightIcon: React.ReactNode;
        onClick: () => void;
      }>;

    const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
      children,
      className = "",
      leftIcon,
      rightIcon,

      ...restProps
    }) => {
      return (
        <button className={className} {...restProps}>
          {!!leftIcon && leftIcon}
          {children}
          {!!rightIcon && rightIcon}
        </button>
      );
    };

export { Button };

Data binding

Connect your apps to your data sources faster than ever using REST APIs

Learn more

const [login, setLogin] = React.useState<PostLoginResponseType>();
    const formValidationSchema = yup.object().shape({
      username: yup
        .string()
        .required("Username is required")
        .matches(
          /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/,
          "Username is not in correct format"
        ),
      password: yup
        .string()
        .required("Password is required")
        .matches(
          /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-._]).{8,}$/,
          "Password is not in correct format"
        ),
    });
    const form = useForm(
      { username: "", password: "" },
      {
        validate: true,
        validateSchema: formValidationSchema,
        validationOnChange: true,
      }
    );
    const navigate = useNavigate();
    function callApi(data: Partial<{ username: string; password: string }>) {
      const req = {
        data: { username: data?.username, password: data?.password },
      };
      postLogin(req)
        .then((res) => {
          setLogin(res?.data);
          toast.success("Success");
        })
        .catch((err) => {
          console.error(err);
          toast.error("Error!");
        });
    }

Live preview

Use our browser compiler to generate previews on the go

Learn more

Find all features in one page...

Check all features

Generate source code

We offer code generation with multiple customizable configurations, tailored to your preferred framework of choice for a truly personalized development experience