The Coach Mark component is used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.

1. Reference

This component inherits props from the Check Mark.

Prop

Type

Default

direction

bottom

top

left

right

bottom

2. Direction

You can edit the direction with the bottom, top, left or right parameter.

Image 2.1 : Direction bottom

Image 2.2 : Direction mark top

Image 2.3 : Direction left

Image 2.4 : Direction mark right

Jetpack Compose

The CoachMark component is a customizable SwiftUI view used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.

1. Reference

This component inherits props from the Coach Mark.

Prop

Type

Default

direction

CoachMarkDirection.top

CoachMarkDirection.left

CoachMarkDirection.right

CoachMarkDirection.bottom

items

.title

.description

2. Direction

You can edit the direction with the CoachMarkDirection.top, CoachMarkDirection.left, CoachMarkDirection.right or CoachMarkDirection.bottom parameter.

Headline
Pack my box with five dozen liquor jugs. How vexingly quick draft.
Back
Next step


CoachMark(
direction = CoachMarkDirection.bottom,
items = listOf(CoachMarkStep(
title = "Headline 1",
description = "Pack my box with five dozen liquor jugs. How vexingly quick draft.",
),
CoachMarkStep(
title = "Headline 2",
description = "Pack my box with five dozen liquor jugs. How vexingly quick draft.",
))
)

Preview

Code

Headline

Pack my box with five dozen liquor jugs. How vexingly quick draft.

Back

Next step

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Copy

Installation

Use this command to install the component in your project.

pnpm dlx shadcn@latest add alert

Copy

Usage

Add this code example to your project to see how the component works.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

Copy

<Alert variant="default | destructive">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version