UploadCN
DocsComponentsExamples

Assignment Submission

Coursework hand-in, like a learning platform: attach work, turn it in, unsubmit to make changes. Shows the deadline and flags late work.

"use client"

import * as React from "react"
import { toast } from "sonner"

import { AssignmentSubmission } from "@/components/assignment-submission"

export default function AssignmentSubmissionExample() {
  // Due in two days, fixed at mount so it doesn't change on re-render.
  const [due] = React.useState(() => new Date(Date.now() + 2 * 86_400_000))
  return (
    <div className="w-full max-w-md">
      <AssignmentSubmission
        due={due}
        onSubmit={async (files) => {
          await new Promise((resolve) => setTimeout(resolve, 600))
          toast.success(`Turned in ${files.length} files`)
        }}
      />
    </div>
  )
}

Installation

npx shadcn@latest add @uploadcn/assignment-submission

Usage

import { AssignmentSubmission } from "@/components/assignment-submission"
<AssignmentSubmission
  title="Essay: The Industrial Revolution"
  due={new Date("2026-11-01T23:59:00")}
  onSubmit={(files) => turnIn(files)}
/>

The countdown renders on the client only, so server and client HTML always match.

Props

Prop

Type

On this page

InstallationUsageProps