# Examples & Recipes
URL: /docs/web/guide/examples

Practical multi-component patterns and recipes for common UI scenarios.

Real-world patterns that combine multiple Docyrus UI components. Copy, adapt, and use in your projects.

## CRUD Table with Filters

A common pattern: a data grid with toolbar filters, search, and create/delete dialogs.

```tsx
import { useState } from 'react';

import { DataGrid } from '@/components/docyrus/data-grid';
import { DataTableFilter } from '@/components/docyrus/data-table-filter';
import { SearchInput } from '@/components/docyrus/search-input';
import { DeleteConfirmDialog } from '@/components/docyrus/delete-confirm-dialog';
import { CreateRecordDialog } from '@/components/docyrus/create-record-dialog';
import { Button } from '@/components/ui/button';

export function ContactsPage() {
  const [search, setSearch] = useState('');
  const [filters, setFilters] = useState([]);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [showCreate, setShowCreate] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      {/* Toolbar */}
      <div className="flex items-center gap-3">
        
        
        
      </div>

      {/* Grid */}
      
    </form>
  );
}
```

## Dashboard Layout

Combine stats, charts, and activity panels into a dashboard view:

```tsx
import { AwesomeStats } from '@/components/docyrus/awesome-stats';
import { RecordActivityPanel } from '@/components/docyrus/record-activity-panel';
import { NotificationsPanel } from '@/components/docyrus/notifications-panel';
import { Calendar } from '@/components/docyrus/calendar';

export function DashboardPage() {
  return (
    <div className="flex flex-col gap-6">
      {/* Stats row */}
      

      {/* Main content + sidebar */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">
          
        </div>

        <div className="flex flex-col gap-4">
          
          
        </div>
      </div>
    </div>
  );
}
```

## File Attachment with Preview

Handle file uploads with preview and attachment management:

```tsx
import { useState } from 'react';

import { FileAttachmentPanel } from '@/components/docyrus/file-attachment-panel';
import { ImageEditor } from '@/components/docyrus/image-editor';
import { AwesomeDialog } from '@/components/docyrus/awesome-dialog';

export function DocumentManager() {
  const [files, setFiles] = useState
    </>
  );
}
```

## Kanban with Detail Panel

Project board with click-to-expand detail view:

```tsx
import { useState } from 'react';

import { Kanban } from '@/components/docyrus/kanban';
import { AwesomeCard } from '@/components/docyrus/awesome-card';
import { CommentsPanel } from '@/components/docyrus/comments-panel';
import { EditableValue } from '@/components/docyrus/editable-value';

export function ProjectBoard() {
  const [selectedTask, setSelectedTask] = useState
      )}
    </div>
  );
}
```

## Record Detail Page

Editable record with activity timeline, sharing, and delete confirmation:

```tsx
import { EditableRecordDetail } from '@/components/docyrus/editable-record-detail';
import { RecordActivityPanel } from '@/components/docyrus/record-activity-panel';
import { RecordSharing } from '@/components/docyrus/record-sharing';
import { RecordDeleteConfirmDialog } from '@/components/docyrus/record-delete-confirm-dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

export function RecordPage({ recordId }: { recordId: string }) {
  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
      <div className="lg:col-span-2">
        
      </div>

      <div>
        
            
          
          
          
        
      </div>
    </div>
  );
}
```

## Related

- [Installation](/docs/web/guide/installation) — Set up Docyrus UI in your project
- [Components](/docs/web/components) — Browse all web components
- [API Reference](/docs/guide/api-reference) — REST client documentation