Settings Integrations 9 - Import data sources pickerPro

An import screen where users pick a data source from a grid of file, database and app sources, see what will be imported and run an import with live progress and a completion summary. Use it for migrating data into your product from spreadsheets, databases or competing tools.

About Settings Integrations 9

An import screen where users pick a data source from a grid of file, database and app sources, see what will be imported and run an import with live progress and a completion summary. Use it for migrating data into your product from spreadsheets, databases or competing tools.

Settings Integrations 9 is a settings integrations block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 107 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • settings
  • import
  • data sources
  • migration
  • progress
  • csv

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add settings-integrations-09

Dependencies installed automatically: lucide-react, motion.

Uses: button, progress, reveal, utils.

Usage

import SettingsIntegrations09 from "@/components/blocks/settings-integrations-09"

export default function Page() {
  return <SettingsIntegrations09 />
}

FAQ