Dynamic Layer
v5.1
Introduction
About
Getting started
What's new
Changelog
Roadmap
Components
Accordion
Alert
Avatar
Avatar Group
Badge
Bottom Navigation
Bottom Sheet
Button
Button Dock
Button Icon
Button Loading
Button Timed
Card
Calendar
Checkbox
Chip
Coach Mark
Input
Input OTP
Line Item
Line Item Message
Loading Dots
Message
Message Loading
Message Dock
Pagination
Pin Keyboard
Progress
Radio Button
Radio Group
Search Field
Separator
Segmented Control
Snackbar
Skeleton
Slider
Switch
Tab Control
Tag
Textarea
Tooltip
Top Navigation
Top Navigation Message
Templates
Account Setup
Account
Chat
Country selection
Filter
Forgot password
Inbox
Log in
Passcode
Paywall
Search
Sign up
Splash Screen
Verification
Product
Grid
Iconography
Screen Sizes
Toolkit
Brand
App Icon
Colors
Illustrations
Logo Versions
Typography
Design Tokens
Background Color
Border Color
Radius
Border Width
Font Size
Font Weight
Font Family
Line Height
Letter Spacing
Breakpoints
Spacing
Shadows
Dark Mode
Introduction
About
Getting started
Changelog
Roadmap
Accordion
Alert
Avatar
Avatar Group
Badge
Bottom Navigation
Bottom Sheet
Button
Button Dock
Button Icon
Button Loading
Button Timed
Card
Checkbox
Chip
Coach Mark
Input
Input OTP
Line Item
Line Item Message
Loading Dots
Message
Message Loading
Message Dock
Pagination
Pin Keyboard
Progress
Radio Button
Radio Group
Search Field
Separator
Segmented Control
Snackbar
Skeleton
Slider
Switch
Tab Control
Tag
Textarea
Tooltip
Top Navigation
Top Navigation Message
Account Setup
Account
Chat
Country selection
Filter
Forgot password
Inbox
Log in
Passcode
Paywall
Search
Sign up
Splash Screen
Verification
Grid
Iconography
Screen Sizes
Toolkit
App Icon
Colors
Illustrations
Logo Versions
Typography
Background Color
Border Color
Radius
Border Width
Font Size
Font Weight
Font Family
Line Height
Letter Spacing
Breakpoints
Spacing
Shadow
Dark mode

Input

PRO

You can edit 8 Components for free. Get premium for unlimited access.

Displays a form input field or a component that looks like an input field.

Figma

The Input Field is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.

1. Reference

This component inherits props from the Input Field.

Prop
Type
Default
type
default
disabled
success
error
default
state
default
active
filled
default
size
sm
md
lg
lg
iconLeft
true
false
false
iconRight
true
false
false

2. Type

You can edit the type with the default, disabled, success or error parameter.

Image 2.1 : Type default

Image 2.2 : Type success

Image 2.3 : Type disabled

Image 2.4 : Type error

3. Size

You can edit the size with the sm, md or lg parameter.

Image 3.1 : Size lg

Image 3.2 : Size md

Image 3.3 : Size sm

4. State

You can edit the state with the default, active or filled parameter.

Image 4.1 : State default

Image 4.2 : State active

Image 4.3 : State filled

5. iconLeft

You can edit the iconLeft with the true or false parameter.

Image 5.1 : iconLeft false

Image 5.2 : iconLeft true

6. iconRight

You can edit the iconRight with the true or false parameter.

Image 6.1 : iconRight false

Image 6.1 : iconRight true

SwiftUI

The DLInputField is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.

1. Reference

This component inherits props from the Input Field.

Prop
Type
Default
type
.none
.icon
.warning
.success
.error
.none
size
.sm
.md
.lg
.lg
state
.normal
.disabled
.normal
placeholder
"text"

-

text
"text"

-

errorString
"text"

-

IconPressed

-

-

2. Type

You can edit the type with the .none, .icon, .warning, .success or .error parameter.

Input Field
Input Field
Input Field
Input Field
Description
Input Field
Input Field
...

3. Size

You can edit the size with the .sm, .md or .lg parameter.

Input Field
Input Field
Input Field
...

4. State

You can edit the state with the .normal or .disabled parameter.

Input Field
Input Field
...

Jetpack Compose

The InputField is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.

1. Reference

This component inherits props from the Input Field.

Prop
Type
Default
type
InputFieldType.default
InputFieldType.warning
InputFieldType.success
InputFieldType.error
InputFieldType.default
size
InputFieldSize.sm
InputFieldSize.md
InputFieldSize.lg
InputFieldSize.lg
state
InputFieldState.default
InputFieldState.disabled
InputFieldState.default
placeholder
"text"

-

text
"text"

-

2. Type

You can edit the type with the .none, .icon, .warning, .success or .error parameter.

Input Field
Input Field
Input Field
Input Field
Description
Input Field
Input Field
InputField(
size = InputFieldSize.lg,
placeholder = "Input Field",
text = normalText.value,
onValueChange = {
normalText.value = it
}
)

InputField(
size = InputFieldSize.lg,
text = successText.value,
isSuccess = true,
placeholder = "Input Field",
onValueChange = {
successText.value = it }
)

InputField(
size = InputFieldSize.lg,
state = InputFieldState.disabled,
placeholder = "Input Field",
text = disableText.value,
onValueChange = {
disableText.value = it
}
)

InputField(
size = InputFieldSize.lg,
isError = true,
errorText = "Description",
placeholder = "Input Field",
text = errorText.value,
onValueChange = { errorText.value = it }
)

3. Size

You can edit the size with the InputFiledSize.sm, InputFiledSize.md or InputFiledSize.lg parameter.

Input Field
Input Field
Input Field
...

4. State

You can edit the state with the .normal or .disabled parameter.

Input Field
Input Field
...

Preview

Preview

Code

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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

Examples

Size

Preview

Code

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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

Variants

Preview

Code

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Description
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

With Icon

Preview

Code

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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

Disabled

Preview

Code

Input Field
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

Discover more content

Figma
Github
Npm
LinkedIn

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version