# Docyrus Data Source Picker
URL: /docs/web/components/docyrus-data-source-picker

Docyrus Data Source Picker component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { Database, FileJson, ServerCog } from 'lucide-react';

export function DocyrusDataSourcePickerDemo() {
  return (
    <div className="flex w-full flex-col gap-4 rounded-lg border border-dashed bg-muted/20 p-6">
      <div className="flex items-center gap-3">
        <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
          
        </div>
        <div className="flex flex-col">
          <span className="text-sm font-semibold">DocyrusDataSourcePicker</span>
          <span className="text-xs text-muted-foreground">
            Render-prop wrapper — pairs an apps → data sources tree with a record picker dialog.
          </span>
        </div>
      </div>

      <div className="grid gap-2 text-xs">
        <div className="flex items-center gap-2 rounded-md border bg-background px-3 py-2">
          
          <span className="font-mono">TreeSelect</span>
          <span className="text-muted-foreground">— pick an app / data source</span>
        </div>
        <div className="flex items-center gap-2 rounded-md border bg-background px-3 py-2">
          
          <span className="font-mono">Select record</span>
          <span className="text-muted-foreground">— opens a record picker backed by useDocyrusDataTable</span>
        </div>
      </div>

      <p className="text-[11px] leading-relaxed text-muted-foreground">
        Requires a Docyrus
        {' '}
        <code className="rounded bg-muted px-1">RestApiClient</code>
        {' '}
        — see the JSONata / Handlebars / Adaptive Card editor pages in the playground for live usage.
      </p>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-docyrus-data-source-picker
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  DocyrusDataSourcePicker
} from "@docyrus/ui/components/docyrus-data-source-picker";

```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `schema` | `JsonSchema \| null` | — |
| `selectedDataSource` | `DataSource \| null` | — |
| `jsonataContextPaths` | `Array<ContextPath>` | — |
| `handlebarsContextPaths` | `Array<ContextPath>` | — |
| `selectedRecord` | `Record<string, unknown> \| null` | — |
| `recordText` | `string` | — |
| `hasSelection` | `boolean` | — |
| `className` | `string` | — |