DEV Community: Santiago Moraga Caldera

[Boost]

Santiago Moraga Caldera — Thu, 12 Mar 2026 06:24:48 +0000

Layout Builder Expansion & Signature Input – Shadcn UI Multi Form v1.5.0

Santiago Moraga Caldera ・ Mar 11

#opensource #nextjs #shadcnui #buildinpublic

Layout Builder Expansion & Signature Input – Shadcn UI Multi Form v1.5.0

Santiago Moraga Caldera — Wed, 11 Mar 2026 07:07:39 +0000

Building tools in public has been one of the most rewarding parts of my developer journey. Over the past months, I’ve been working on Shadcn UI Multi Form, an open-source form builder focused on creating structured, modern multi-step forms using shadcn/ui.

Today I’m releasing version 1.5.0, which introduces new layout capabilities, a signature input component, and several internal improvements to the builder architecture.

This update is a step toward making the project more flexible, more structured, and easier to extend as the builder continues to grow.

What is Shadcn UI Multi Form?

Shadcn UI Multi Form is an open-source form builder designed to help developers create structured multi-step forms with a modern UI and flexible configuration.

The goal of the project is to provide:

A clean and intuitive builder experience
Flexible layout composition
Extendable input components
Structured code generation

Instead of manually wiring every field and layout, the builder allows developers to visually compose forms while keeping the generated code maintainable.

What’s new in v1.5.0

This release focuses on improving form structure and layout composition, while introducing a new input component that many real-world forms require.

New Layout Elements

Two new layout elements are now available in the builder:

Two Columns

This element allows developers to organize form inputs into two columns, making it easier to create more structured and readable forms.

This is particularly useful for:

address sections
grouped inputs
compact form layouts

Separator

The new Separator element helps divide form sections visually, improving readability and overall UX.

Instead of long forms with no visual hierarchy, you can now structure forms more clearly.

Signature Input

One of the most exciting additions in this release is the Signature Input component.

This component allows users to capture signatures directly inside the form using a canvas-based interface.

Features include:

Canvas-based signature capture
Configurable pen color
Configurable background
Clean integration with the form builder

Signature inputs are often required for:

agreements
consent forms
onboarding flows
internal tools

Now they can be easily added directly through the builder.

Dedicated Documentation

This release also introduces a dedicated documentation page for the Signature input within the Components section.

The goal is to make it easier for developers to understand how to use and configure the component without digging through the source code.

Builder Improvements

In addition to new features, this version also improves the internal behavior of the builder.

Layout-aware rendering

The builder now uses a shared render plan that allows layouts and inputs to work together more consistently.

This improves:

code generation
layout behavior
overall maintainability

UX refinements

Several improvements were made to the builder interface:

better layout assignment behavior
improved element selection
clearer highlighting when inserting new elements

These changes make the builder feel more predictable and easier to use.

Bug Fixes

This release also fixes several issues related to element insertion and layout references.

Previously, some selection and layout reference issues could occur when inserting new elements into complex form structures. These behaviors have now been corrected.

Building in Public

One of the most interesting parts of working on this project has been building it in public.

Sharing progress, metrics, experiments, and updates has helped the project grow organically and connect with other developers who are interested in building better tools.

Projects like this evolve over time, and Shadcn UI Multi Form is still far from finished. There are many more ideas and improvements planned as the builder continues to mature.

Try the project

You can explore the project here:

🌐 Live Demo
https://shadcn-ui-multi-form.vercel.app

💻 GitHub Repository
https://github.com/Remy349/shadcn-ui-multi-form

Follow the journey

If you're interested in open-source tools, developer workflows, and building products in public, you can follow my journey here:

🐦 X (Twitter)
https://x.com/Remy_349

What’s next?

The next updates will focus on:

expanding layout composition
adding more input components
improving builder performance
refining the developer experience

The goal is to keep evolving the project into a powerful yet flexible form builder for modern applications.

If you’d like to follow the progress or contribute ideas, feel free to explore the repository and share your feedback.

Shadcn UI Multi Form — A new version is coming soon!

Santiago Moraga Caldera — Thu, 30 Oct 2025 06:41:36 +0000

After some time away, I’m finally back — and I’m coming back stronger than ever! 💪

The progress on Shadcn UI Multi Form has been amazing lately.
A completely refreshed design, better user experience, and tons of new features are on the way.

This new version will include:

✨ A more polished and intuitive interface
🧩 Enhanced form-building capabilities
⚙️ Zod schema support for easier form validation
💡 Many small improvements that make the whole experience smoother
✨ And much more

Here’s a sneak peek of the upcoming update 👇

The project aims to make multi-step form creation simpler, cleaner, and developer-friendly using Next.js, TailwindCSS, and Shadcn UI.

Stay tuned — the new version is almost ready to launch! 🚀

Links:

💻 GitHub Repo: https://github.com/Remy349/shadcn-ui-multi-form
🐦 Follow updates on X: https://x.com/Remy_349

Introducing Shadcn UI Multi Form – Simplify Multi-Step Form Building!

Santiago Moraga Caldera — Sat, 01 Feb 2025 02:31:24 +0000

Building multi-step forms in React can be complex and time-consuming. Managing state, validation, UI consistency, and ensuring a smooth user experience often requires extra effort. That's exactly why I created Shadcn UI Multi Form – a tool designed to make form creation seamless, efficient, and enjoyable!

🎯 Why Shadcn UI Multi Form?

When working on multi-step forms, I realized how much effort goes into structuring them properly. Handling state between steps, ensuring a smooth UI flow, and integrating form validation can be overwhelming. Shadcn UI Multi Form was built to simplify this process by providing an intuitive way to:

✅ Design and structure multi-step forms effortlessly
✅ Utilize Shadcn UI components for a beautiful and accessible UI
✅ Leverage React Hook Form for efficient form management
✅ Preview the form live before exporting the code
✅ Copy and use the generated form code in your own React projects

🛠️ How It Works

Shadcn UI Multi Form provides an easy-to-use form builder where you can:
1️⃣ Select input fields (currently supports text, email, and password fields)
2️⃣ Customize field labels to match your form's requirements
3️⃣ Preview the form layout before exporting
4️⃣ Copy the generated React component code and integrate it into your project

🚀 Ongoing Improvements & Future Plans

This is just the beginning! I will keep enhancing Shadcn UI Multi Form to support more features like:

🌟 More input types (dropdowns, checkboxes, date pickers, etc.)
🛠️ Zod validation support for seamless form validation
🎨 Dark mode for a better UI experience
📦 More Shadcn UI components to improve form-building flexibility

🔗 Try It Now!

The project is live, and you can check it out here:

👉 Shadcn UI Multi Form

Building a Dynamic Carousel Component with Shadcn UI, ViteJS, TailwindCSS, and ReactJS (with TypeScript)

Santiago Moraga Caldera — Tue, 21 Jan 2025 01:40:21 +0000

Github Repository

Carousels are an essential part of modern web applications, enabling you to display content like images, promotions, or testimonials in an interactive and visually appealing manner. In this tutorial, we’ll walk you through creating a dynamic carousel component using Shadcn UI, ViteJS, TailwindCSS, and ReactJS with TypeScript. By the end, you’ll have a fully functional and reusable carousel for your projects.

Introduction

Carousels make content engaging and easy to consume, offering users a better browsing experience. This guide covers the setup, implementation, and explanation of a carousel component using Shadcn UI, React, and supporting libraries. We’ll use:

Shadcn UI for pre-built components and utilities.
ViteJS for a fast and modern development environment.
TailwindCSS for styling.
ReactJS with TypeScript for dynamic functionality and type safety.

This tutorial ensures you not only learn the "how" but also understand the "why" of each piece of functionality.

Setting Up the Project

To follow along, ensure you have Node.js and npm or Yarn installed on your system.

1.Initialize the Project

Run the following commands to set up a Vite project with React and TypeScript:

npm create vite@latest
cd my-carousel
npm install

2.Install Dependencies

Add the required packages for this project:

npm install embla-carousel-react embla-carousel-autoplay

npm install -D tailwindcss postcss autoprefixer

npx shadcn@latest init

3.Set Up TailwindCSS

TailwindCSS DOCs

4.Set Up ShadcnUI

ShadcnUI DOCs

Import the pre-built Shadcn UI components into your project. For this example, we’ll use the Carousel and Button components.

5.Create a Carousel Component

Add the CustomCarousel component in src/custom-carousel.tsx.

The Custom Carousel Code

Here is the complete implementation of the carousel component:

import {
  Carousel,
  CarouselApi,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import Autoplay from "embla-carousel-autoplay";
import { useCallback, useEffect, useState } from "react";
import { Button } from "./components/ui/button";

export const CustomCarousel = () => {
  const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);

  const onSelect = useCallback(() => {
    if (!carouselAPI) return;

    setSelectedIndex(carouselAPI.selectedScrollSnap());
  }, [carouselAPI]);

  const scrollTo = (index: number) => {
    if (!carouselAPI) return;

    carouselAPI.scrollTo(index);
  };

  useEffect(() => {
    if (!carouselAPI) return;

    onSelect();

    setScrollSnaps(carouselAPI.scrollSnapList());

    carouselAPI.on("select", onSelect);
  }, [carouselAPI, onSelect]);

  return (
    <div>
      <Carousel
        plugins={[Autoplay({ delay: 2500 })]}
        opts={{ loop: true, align: "center" }}
        setApi={setCarouselAPI}
      >
        <CarouselContent>
          {[...Array(6)].map((_, index) => (
            <CarouselItem key={index} className="md:basis-1/2">
              <div className="border rounded-md h-[16rem] bg-muted/50 flex items-center justify-center md:h-[20rem]">
                <p className="font-bold text-2xl text-muted-foreground">
                  {index + 1}
                </p>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
      <div className="flex justify-center mt-4 space-x-2">
        {scrollSnaps.map((_, index) => (
          <Button
            key={index}
            onClick={() => scrollTo(index)}
            size="icon"
            className={`w-2 h-2 rounded-full ${
              selectedIndex === index ? "bg-primary" : "bg-gray-300"
            }`}
          />
        ))}
      </div>
    </div>
  );
};

Explanation of the Code

1.State Management

carouselAPI: Stores the API object returned by the carousel, giving access to methods like scrollTo and selectedScrollSnap.

selectedIndex: Tracks the currently selected slide index.

scrollSnaps: Stores an array of snap points, representing the indices of the slides.

2.Event Handling

onSelect: Updates the selectedIndex whenever the user selects a new slide. It ensures the UI stays in sync with the carousel's state.

scrollTo: Allows programmatic navigation to a specific slide based on its index. This enables interaction through buttons or other controls.

3.Lifecycle Management

The useEffect hook ensures the carousel initializes correctly:

Calls onSelect to sync the selectedIndex state initially.
Sets up scrollSnaps using the carouselAPI.scrollSnapList method.
Attaches an event listener to keep selectedIndex updated.

Final Result

The carousel is now fully functional with the following features:

Autoplay with a configurable delay.
Looping for seamless content browsing.
Navigation dots that update dynamically based on the current slide.
Responsive design with TailwindCSS.

Conclusion

Congratulations! You've successfully built a reusable carousel component using Shadcn UI, ViteJS, TailwindCSS, and ReactJS with TypeScript. This powerful combination ensures your component is both visually appealing and highly functional.

Feel free to customize the styles, add new features, or integrate this carousel into your projects. Let me know how it worked for you in the comments!

Upload videos to Vimeo using NodeJS, ExpressJS and TypeScript

Santiago Moraga Caldera — Wed, 10 Jul 2024 17:17:13 +0000

There are many services that offer you the opportunity to store your videos or images in them, some of these can be Cloudinary, Amazon S3 and more. But the protagonist of this tutorial is Vimeo.

What is Vimeo?

Vimeo is a video hosting and distribution platform that allows users to upload, share and view high-definition videos. Vimeo is known for its focus on video quality and for offering advanced tools for content creators, such as customization options, detailed analytics and privacy controls.

Requirements to develop the project

NodeJS installed
Vimeo account

Project development

1. External links

Project repository - Github

2. Initial setup

The first thing is to create a folder where all the necessary content and code will be stored, then create our package.json to install all the necessary dependencies:

$ mkdir project-name
$ cd project-name/
$ npm init -y

Now that we have our package.json file we are going to define the necessary file and folder structure so we can focus on the code. We will create a folder src in the root of our project, inside src is where we will store our necessary files, the structure would be the following one:

src
├── app.ts
└── routes
    └── videos.ts

3. Installing necessary dependencies and typescript setup

It is time to install the necessary packages for the development of the project, in the terminal of our project we will execute the following:

$ npm i express axios dotenv multer

These will be the basic dependencies of our project, among the packages we have "multer" which is a node.js middleware for handling multipart/form-data, which is mainly used to upload files, "dotenv" to handle environment variables, "axios" for http requests and "express" that we will use to develop our api.

Now we will proceed to install the development dependencies and packages needed to configure typescript in our project:

npm i typescript ts-node morgan nodemon @types/express @types/morgan @types/multer @types/node -D

Once everything is installed we will configure typescript and nodemon, nodemon is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.

We will create a tsconfig.json file to configure typescript:

// tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

In our package.json we will add a new command for nodemon configuration in our project, also a command to compile our typescript and one more to run in production mode:

// package.json

{
  "name": "upload-videos-vimeo-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon src/app.ts",
    "build": "npx tsc",
    "start": "node src/app.js"
  },
  ...
}

4. Basic server setup

Let's go to our app.ts file to start the basic configuration of our server:

// app.ts

import "dotenv/config";

import express from "express";
import morgan from "morgan";

const app = express();

const PORT = 3000;

app.use(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

After that we simply execute the following command to run our server:

$ npm run dev

> upload-videos-vimeo-node@1.0.0 dev
> nodemon src/app.ts

[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/app.ts`
Server is running at http://localhost:3000

5. Create api path for uploading videos

Let's go to our videos.ts file to create the path we will use to process the video upload to vimeo:

// videos.ts

import { Router, Request as ExRequest, Response as ExResponse } from "express";

const videoRouter = Router();

videoRouter.post("/upload", async (req: ExRequest, res: ExResponse) => {
    try {
      res.status(201).json({ message: "Video successfully uploaded" });
    } catch (error) {
      res.status(500).json({ message: "Internal server error" });
    }
  },
);

export default videoRouter;

In the code we have written we are declaring the method and the path we will use to process the video upload to vimeo, the logic will be inside a try/catch block to handle possible errors that may occur when processing upload.

At the end we are exporting our videoRouter variable to use it in our app.ts file to set the access of this route in our api. Let's go into our app.ts file to update the code in it and use the videoRouter variable:

// app.ts

import "dotenv/config";

import express from "express";
import morgan from "morgan";

// This is new
import videoRouter from "./routes/videos";

...

app.use(express.urlencoded({ extended: true }));

// This is new
app.use("/api/videos", videoRouter);

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

If you visit the path http://localhost:3000/api/videos/upload using the POST method you should see the following:

6. Upload videos to vimeo using its api

It is time to start integrating vimeo in our api, in order to upload videos to vimeo we will make use of its api. We must go to the developers section of vimeo using the link https://developer.vimeo.com/:

Something very important that we need to be able to upload videos to vimeo is that we need an access token. For that we will click on the Create an app button:

After clicking on the button to create an app, a form will appear with basic information that we will have to fill out in order to get our access token:

Once the form is filled out, it will redirect us to the panel to obtain our access token. In the Generate Access Token section we will click on Authenticated(you):

To be able to use the vimeo api without problems we must allow our token to edit and upload videos. Click on the Private, Edit and Upload checkboxes.

Once we have everything we need, we will go to the vimeo api documentation to start the process of uploading our videos to the platform https://developer.vimeo.com/api/upload/videos.

Before continuing with the development of our api we must create an .env file in the root of our project to save the access token we obtained:

// .env

VIMEO_ACCESS_TOKEN=your_access_token_here

In our videos.ts file we will start configuring multer so that our api is able to receive and process files. In this case we are interested in videos:

// videos.ts

import { Router, Request as ExRequest, Response as ExResponse } from "express";
import multer from "multer";

const videoRouter = Router();

const storage = multer.memoryStorage();

const upload = multer({ storage });

videoRouter.post("/upload", upload.single("file"), async (req: ExRequest, res: ExResponse) => {
    try {
      res.status(201).json({ message: "Video successfully uploaded" });
    } catch (error) {
      res.status(500).json({ message: "Internal server error" });
    }
  },
);

export default videoRouter;

The new code we have written is so that our api can process the files it receives, using multer.memoryStorage we are telling multer that the file will be stored temporarily in memory and in the post function of our videoRouter we are telling it to process a single file through the name file, this is achieved by using upload.single("file").

After having configured multer we will make a call to the vimeo api using the post method to create the process of uploading the video to our panel in our vimeo account:

// videos.ts

...

videoRouter.post("/upload", upload.single("file"), async (req: ExRequest, res: ExResponse) => {
    try {
      const VIMEO_ACCESS_TOKEN = process.env.VIMEO_ACCESS_TOKEN;

      const file = req.file;

      if (!file) {
        return res.status(400).json({ message: "File not uploaded" });
      }

      const response = await axios.post(
        "https://api.vimeo.com/me/videos",
        {
          upload: {
            approach: "tus",
            size: `${file.size}`,
          },
        },
        {
          headers: {
            Authorization: `Bearer ${VIMEO_ACCESS_TOKEN}`,
            "Content-Type": "application/json",
            Accept: "application/vnd.vimeo.*+json;version=3.4",
          },
        },
      );

      res.status(201).json({ message: "Video successfully uploaded" });
    } catch (error) {
      res.status(500).json({ message: "Internal server error" });
    }
  },
);

...

In the code we added we are creating a variable to store our access token and another one to handle the file information we are receiving through the request. After this we create a small validation in case an empty request is sent without a file to process.

After that we create the post request to the vimeo api https://api.vimeo.com/me/videos, we send as data the size of the file, we do it using file.size and in the headers we attach our access token. The data we receive after making the request will be stored in a variable, in this case call it response.

Now that we have created the request to upload our video to vimeo the last thing we need to do is to complete the request, to complete the request we must make a patch request to the vimeo api sending as data the content of the file that we receive in its binary format or buffer, we will achieve this using our variable file its property file.buffer.

// videos.ts

...

videoRouter.post("/upload", upload.single("file"), async (req: ExRequest, res: ExResponse) => {
    try {
      ...

      const uploadLink: string = response.data.upload.upload_link;

      await axios.patch(uploadLink, file.buffer, {
        headers: {
          "Content-Type": "application/offset+octet-stream",
          "Upload-Offset": "0",
          "Tus-Resumable": "1.0.0",
        },
      });

      res.status(201).json({ message: "Video successfully uploaded" });
    } catch (error) {
      res.status(500).json({ message: "Internal server error" });
    }
  },
);

...

The uploadLink variable will be used to complete the video upload, it is a link that we receive as a response from our response variable after completing the post request.

As a final point we make the patch request to the vimeo api sending as parameter the link uploadLink and as data in the body of the request the content of the file in its buffer format using file.buffer. With this our video will be successfully uploaded to vimeo.

We send the file to our server using the format multipart/form-data:

And after having done the whole process correctly we should receive a success response if the video is successfully uploaded to vimeo:

The complete code should look like this:

// videos.ts

import axios from "axios";
import { Router, Request as ExRequest, Response as ExResponse } from "express";
import multer from "multer";

const videoRouter = Router();

const storage = multer.memoryStorage();

const upload = multer({ storage });

videoRouter.post("/upload", upload.single("file"), async (req: ExRequest, res: ExResponse) => {
    try {
      const VIMEO_ACCESS_TOKEN = process.env.VIMEO_ACCESS_TOKEN;

      const file = req.file;

      if (!file) {
        return res.status(400).json({ message: "File not uploaded" });
      }

      const response = await axios.post(
        "https://api.vimeo.com/me/videos",
        {
          upload: {
            approach: "tus",
            size: `${file.size}`,
          },
        },
        {
          headers: {
            Authorization: `Bearer ${VIMEO_ACCESS_TOKEN}`,
            "Content-Type": "application/json",
            Accept: "application/vnd.vimeo.*+json;version=3.4",
          },
        },
      );

      const uploadLink: string = response.data.upload.upload_link;

      await axios.patch(uploadLink, file.buffer, {
        headers: {
          "Content-Type": "application/offset+octet-stream",
          "Upload-Offset": "0",
          "Tus-Resumable": "1.0.0",
        },
      });

      res.status(201).json({ message: "Video successfully uploaded" });
    } catch (error) {
      res.status(500).json({ message: "Internal server error" });
    }
  },
);

export default videoRouter;