create file upload in nextjs 13 with shadcn ui

In this tutorial, we will create file upload in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use file upload in next js 13 with shadcn ui you need to install npx shadcn-ui add input.

npx shadcn-ui add input

npx shadcn-ui@latest add

1. Create next js 13 with shadcn ui file upload using shadcn-ui Input, Label component.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full lg:max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}

shadcn ui file upload

2. next js 13 with shadcn ui file upload with blue color.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full lg:max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input
        id="picture"
        type="file"
        className="file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
      />
    </div>
  )
}

shadcn ui file upload with blue color

3. next js 13 with shadcn ui file upload with file border color.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full lg:max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input
        id="picture"
        type="file"
        className="file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 file:border file:border-solid file:border-blue-700 file:rounded-md border-blue-600"
      />
    </div>
  )
}