shadcn.io is not affiliated with official shadcn/ui

Shadcn Download Trigger for React and Tailwind

Trigger file downloads programmatically.

Hello, World! This is a sample text file.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/download-trigger.json

pnpm dlx shadcn@latest add https://kit.dev/r/download-trigger.json

npx shadcn@latest add https://kit.dev/r/download-trigger.json

yarn shadcn@latest add https://kit.dev/r/download-trigger.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/download-trigger.tsx

"use client";

import { DownloadTrigger as ArkDownloadTrigger } from "@ark-ui/react/download-trigger";
import type React from "react";

export const DownloadTrigger = (
  props: React.ComponentProps<typeof ArkDownloadTrigger>
) => <ArkDownloadTrigger data-slot="download-trigger" {...props} />;

Update the import paths to match your project setup.

Usage

import { DownloadTrigger } from "@/registry/react/components/download-trigger";

<DownloadTrigger
  data="..."
  fileName="schema.json"
  mimeType="application/json"
>
  Download
</DownloadTrigger>

Examples

Download SVG

Download an SVG file by passing the SVG markup to data and setting mimeType to image/svg+xml.

Promise

Trigger downloads from a promise that returns a Blob, File, or string. Pass a function to data.

API Reference

DownloadTrigger

Prop	Type	Default
`data`	`DownloadableData \| (() => MaybePromise<DownloadableData>)`	-
`fileName`	`string`	-
`mimeType`	`FileMimeType`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

Client Only

Format