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 { DownloadIcon, FileTextIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";
import { Item, ItemTitle } from "@/components/ui/item";

const DownloadTriggerDemo = () => (
  <div className="flex flex-col gap-4">
    <Item variant="outline">
      <FileTextIcon />
      <ItemTitle>{content}</ItemTitle>
    </Item>
    <DownloadTrigger
      asChild
      data={content}
      fileName="hello.txt"
      mimeType="text/plain"
    >
      <Button size="lg" variant="outline">
        <DownloadIcon />
        Download
      </Button>
    </DownloadTrigger>
  </div>
);

const content = "Hello, World! This is a sample text file.";

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Download Svg

Promise

API Reference

DownloadTrigger

PropType

AttributeType

Client Only

Format