Add

This section provides an overview of how to get started with the `umi add` command.

Intro

The add command is used to add a new component to a project.

umi add

Options

OptionDescriptionDefault
-n, --name <name>The name of the component to add.None
--list -lList available components. (under development)None

Examples

Adding a name for your new component

umi add --name Button

umi add -n Button

List available components (Under development)

umi add --list

umi add -l

Usage

1

Running The Command

Get started by running the command

umi add
2

Select A Component

Choose a component from the list of available components. This will clone the component from the umi-digital/ui package.

✔ Components repository cloned.
? Select a component to add: › - Use arrow-keys. Return to submit.
❯ Button
FieldSet
Form
Heading
Hero_1
Input
TextArea
3

Name Your Component

Next enter the name for the component you are looking to add.

✔ Components repository cloned.
✔ Select a component to add: › Hero_1
Selected component: Hero_1
Component category: heros
? What is the name of the component? ›

You will also notice that your terminal is showing the component category and the component name. This is because the component is being added to the shared directory within the _components directory. In the future, this will be configurable.

4

Scaffolding & Importing

Great! Now you have chosen your name, we do a few things in the background to get the component set up - if these have been done correctly you should see the messages below.

✔ Components repository cloned.
✔ Select a component to add: › Hero_1
Selected component: Hero_1
Component category: heros
✔ What is the name of the component? … hero-1
✔ Component name validated.
✔ Component "hero1" added successfully!
✔ Component schema file added successfully!
⠋ Adding imports...Import and component added successfully!
✔ Imports added

The component has been added to the shared directory within the _components directory. The component is also imported into the index.js file in the schemas directory.

5

Checking the Component

Now that the component has been added, you can start using the component within your project.

But first, let's check the component to make sure it is working correctly.

Open the app/_components/shared/heros/hero1.tsx file, if you followed along with this guide you should see something similar to the following:

import {cn} from '@/lib/utils'

interface Hero_1Props {
data: {
tagline: string
heading: string
descritpion: string
image: {
src: string
alt: string
width: number
height: number
}
}
textAlignHoz?: ('left' | 'center' | 'right') | undefined
textAlignVer?: ('top' | 'center' | 'bottom') | undefined
variant?: ('primary' | 'secondary' | 'tertiary') | undefined
}

export default function Hero1({
data,
textAlignHoz = 'center',
textAlignVer,
}: Hero_1Props) {
return (
<section className="h-screen w-full relative flex items-center justify-center">
<div className="absolute top-0 left-0 z-0 h-screen w-full">
<div className="absolute top-0 left-0 z-0 h-screen w-full bg-gradient-to-b from-black/50 to-black" />
<picture className="">
<source srcSet={data.image.src} />
<img
src={data.image.src}
alt={data.image.alt}
width={data.image.width}
height={data.image.height}
className="object-cover object-center h-screen w-full"
/>
</picture>
</div>
<div
className={cn(
'z-10 text-white gap-4 max-w-[768px] mx-auto',
`text-${textAlignHoz}`,
textAlignVer,
)}
>
<span className="text-base font-semibold">{data.tagline}</span>
<div className="flex flex-col items-center justify-center gap-6">
<h1 className="text-6xl font-bold">{data.heading}</h1>
<p className="text-lg">{data.descritpion}</p>
</div>
</div>
</section>
)
}

The first thing to check are the imports, ensure that they are correctly linking up where they need to and there aren't any type issues etc.

Next lets check the type - this has be dynamically generated when @umi-digital/ui gets built, this means that there aren't many meaningful ways of testing this and so there may be some mistakes. Check this now.

Finally, ensure that there are no other errors with the component.

Moving onto the schema we need to head to sanity/schemas/objects/hero1.js. You should see something similar to this:

import { defineType } from 'sanity'

export default defineType({
'hero_1',
'Hero_1',
  type: 'object',
  fields: [
  {
    name: 'data',
    title: 'Data',
    type: 'object',
  },
  {
    name: 'textAlignHoz',
    title: 'TextAlignHoz',
    type: 'object',
  },
  {
    name: 'textAlignVer',
    title: 'TextAlignVer',
    type: 'object',
  },
  {
    name: 'variant',
    title: 'Variant',
    type: 'object',
  },
],
  preview: {
  prepare()
  {
    return {
      title: 'Hero_1',
    }
  }
,
},
})

Nested Fields:

Nested fields are not currently supported, but will be added in the future. For now please complete these fields manually.

Check that this follows the type as shown in the component as this will make your workflow a lot easier.

Next Steps

Congrats! Now you have a component added to your project. You can now start modifying the component to suit your needs.