Skip to content
gauchocodeUI GALLERY
LIBRARY
All blocks58Data display15Navigation & shell14Forms & actions7Planning12Feedback & overlays4AI & automation4Apps & admin2
RESOURCES
CommunityTeam library
GC
GauchoCodeEngineering & design
v0.1
WorkspaceUI Gallery
CommunityTeam library

All blocks

Explore live patterns, inspect integration code, and copy a ready-to-use prompt.

58 blocks

58 blocks found

Data displayAdapted

Contact table

A clear home for your data. Sort contacts and select rows with a lightweight, semantic table.

SelectionSortingCRM
View block
Data displayAdapted

Resizable columns

Give every column its space. Drag a header edge, or focus the separator and use the keyboard within safe bounds.

Column sizingKeyboardPointer
View block
Data displayAdapted

Pinned first column

Keep the context close. The title column stays visible next to the select column while the rest scrolls.

Sticky columnHorizontal scrollContext
View block
Data displayAdapted

Reorderable columns

Your order of things. Move columns with explicit menu actions.

Column orderMove menuKeyboard
View block
Data displayAdapted

Editable data grid

A little less back and forth. Edit team, project, status, and titles right in the row — saved locally only.

Inline editQuick editBadges
View block
Data displayAdapted

Grouped rows

Structure without noise. Status badges count their posts and fold rows inline.

GroupingExpandBadges
View block
Data displayAdapted

Grouped subtable

Room for detail. Expanding a group opens a nested table with its own header and pagination.

GroupingNested tablePagination
View block
Data displayAdapted

Group by column

Your grouping, your call. Switch between the flat table and grouped views, then pick the grouping column.

Group byView toggleRegroup
View block
Data displayAdapted

Group totals

Numbers where you look. Group rows sum their posts, tinted by share, with a grand total in the footer.

AggregatesFooter totalsHeat cells
View block
Navigation & shellAdapted

Contact side panel

Keep the context. Explore contact details in a floating panel without leaving the page.

DialogDetailsOverlay
View block
Navigation & shellAdapted

Lead activity panel

Everything on one lead, in reach. A date-led list drives an AI follow-up suggestion, key fields, a tabbed timeline and a draft-email action.

Master-detailAI suggestionTimeline
View block
Navigation & shellAdapted

Contextual breadcrumb

Small footprint, clear direction. A navigable hierarchy for your application.

NavigationHierarchyAccessible
View block
PlanningAdapted

Date picker

Pick a day, or a window. Calendar popovers with today outlined, filled selections, and range shading.

PopoverCalendarRange
View block
PlanningAdapted

Event calendar

Your month at a glance. Synthetic events with category dots, a month/year picker, and a day detail list.

Month gridEventsMonth/year picker
View block
PlanningAdapted

Event calendar app

A full calendar app. Month, week, day, 3-day and agenda views, drag-and-drop rescheduling, recurring events and a resource swimlane view.

Month/week/dayDrag & dropRecurrence
View block
PlanningAdapted

Kanban board

Move work forward. Drag cards between colored status columns; every drop is announced.

Drag & dropColumnsStatuses
View block
PlanningAdapted

Roadmap kanban

Feature requests with weight. Description, progress bar and votes on every card across four stages.

KanbanProgressVotes
View block
PlanningAdapted

Kanban with save/discard

Drag now, save when ready. A pending bar tracks unsaved moves and Escape restores the last saved board.

KanbanCommit/cancelEscape
View block
PlanningAdapted

WIP-limited kanban

Limits keep flow honest. Drag column headers to reorder columns, and columns at their WIP limit reject new cards.

KanbanWIP limitColumn order
View block
PlanningAdapted

Gantt timeline

The long view. Date-math bars with day, week or month scales, group summaries, inline task creation and a today marker.

TimelineProgressEditing
View block
AI & automationAdapted

Command palette

One keystroke away. A ⌘K palette with grouped, filterable navigation commands and actions.

⌘KSearchShortcuts
View block
AI & automationAdapted

AI chat

A second pair of eyes. A scripted assistant thread with suggestions, copy/retry actions and live status.

AssistantMessagesPrompt input
View block
Navigation & shellAdapted

App top bar

The frame of the app. Section title plus search, notifications and an avatar user menu.

HeaderSearchUser menu
View block
Navigation & shellAdapted

Dashboard sidebar

The whole map. Brand header, workspace switcher and three navigation modes: labeled list, rail with submenu panel, and collapsed flyouts.

SidebarNavigationCollapse
View block
Navigation & shellAdapted

Contact detail tabs

Keep the context in reach. A quiet, underline-led tab rail for switching between contact detail views.

TabsNavigationResponsive
View block
Navigation & shellAdapted

Tabs with counts

The same quiet rail with optional numeric indicators at the right of each label.

TabsCountsStates
View block
Forms & actionsAdapted

Inline select

Edit in place. A searchable pill or field with colored options, clear action and keyboard support.

Inline editSearchPopover
View block
Data displayAdapted

Agent cards

Every agent, at a glance. Status, channels and today’s metrics with pause and playground actions.

CardsStatusMetrics
View block
Feedback & overlaysAdapted

Destructive confirmation

Irreversible actions get a speed bump. A small modal with cancel/destructive pair, focus management and a pending state.

DialogDestructiveConfirmation
View block
Forms & actionsAdapted

Button variants

One action, one clear shape. Primary, secondary, outline, ghost, link and destructive, in every size, with a leading-icon pattern for creation actions.

VariantsSizesIcon button
View block
Forms & actionsAdapted

Save & sync buttons

Saving or syncing, said in the button. A fill sweeps across it instead of a separate spinner: determinate Save, indeterminate Sync, and a multi-stage Publish.

ProgressSavingSync
View block
AI & automationAdapted

Automation workflow canvas

Build it, branch it, ship it. Trigger, condition and action steps wired on a real React Flow canvas, with add/duplicate/delete from a toolbar or right-click menu.

React FlowNode canvasContext menu
View block
AI & automationAdapted

Pipeline run canvas

Watch a run land, stage by stage. An ETL DAG with six run states, animated in-flight edges, a status legend and dependency-ordered retry on the failed task.

React FlowDAGRun states
View block
Feedback & overlaysAdapted

Toast notifications

One line, said clearly. Default, success, error, warning and info toasts, an action toast with Undo, a promise toast that resolves or rejects, and a custom progress-bar toast.

SonnerRich colorsProgress
View block
Forms & actionsAdapted

Rich text editor

Write it, format it. A shadcn.io-style toolbar — lists, block types, inline marks, undo and @-mention — over a real editable area.

contentEditableToolbarFormatting
View block
Data displayPackage

Data table

The shared Tukiverse table. Row details, faceted filters, pinning, totals, grouping and column controls — install it, don’t copy it.

TanStack v9FacetsPinning
View block
PlanningPackage

Event calendar

The shared Tukiverse calendar. Month, week, day and agenda views, drag rescheduling and recurring events.

Drag & dropRecurrenceViews
View block
PlanningPackage

Kanban board

The shared Tukiverse board. Drag cards across WIP-limited columns, truncate heavy stages behind Show more, collapse stages to focus, hear every move announced.

Drag & dropWIP limitsaria-live
View block
PlanningPackage

Kanban swimlanes

Split the shared Tukiverse board into lanes by any field. Pick the field, pick the layout, drag cards across lanes and columns.

SwimlanesVariantsDrag & drop
View block
Data displayPackage

Filters

The shared Tukiverse filter bar. Stepped attribute → condition → value builder over a boolean query tree — install it, don’t copy it.

Query treePredicateToolbar
View block
Data displayPackage

List query state

Shareable list state in the URL. Schema-driven codec plus an SSR-safe hook — no router required.

URL stateShareableSSR-safe
View block
Navigation & shellPackage

Tabs

The shared Tukiverse tab rail. Count pills, a disabled state and full keyboard navigation — install it, don’t copy it.

ARIA tabsCountsKeyboard
View block
Forms & actionsPackage

Inline select

The shared Tukiverse inline field. Searchable popover with colored options in ghost-cell or bordered-field variants.

Inline editSearchPopover
View block
Forms & actionsPackage

Rich editor

The shared Tukiverse editor. Toolbar, lists, marks and @-mentions over a real editable area — no heavy framework.

contentEditableToolbarSanitized
View block
Navigation & shellPackage

Tenant switcher

The shared Tukiverse context switcher. Flat tenants or nested tenant → workspace groups, rail mode and super-admin impersonation.

SidebarWorkspacesImpersonation
View block
Navigation & shellPackage

Sidebar

The shared Tukiverse navigation. Five variants, filtering, badges, section controls and row actions on Radix or Base UI.

NavigationFive variantsFiltering
View block
Data displayPackage

Selection bar

The shared Tukiverse bulk-action bar. Fixed width, the main actions visible and the rest in a menu, icons on narrow screens.

SelectionBulk actionsResponsive
View block
Apps & adminPackage

Integrations hub

The shared Tukiverse integrations screen. Provider cards, an operational list and a details drawer — status is data, actions are yours.

Cards & listStatusDrawer
View block
Feedback & overlaysPackage

Route recovery

The shared Tukiverse recovery state. Permission, unavailable-link and temporary-error screens inside your existing app shell.

403 / 404RecoveryAccessible
View block
Apps & adminPackage

Email admin

Email operations and template administration. Health, delivery metrics, a sandboxed template browser and delivery events.

TemplatesDeliveryHealth
View block
PlanningPackage

Planner Gantt

A shared planning timeline with nested tasks, progress, rollups, unscheduled work and drag scheduling.

TimelineSchedulingTree
View block
Feedback & overlaysPackage

Notifications

A notification popover and full-page view with shared read state, search and host-owned selection.

PopoverFull-page viewRead state
View block
Navigation & shellPackage

Page header

A composable page heading with actions, selectable KPIs and a tabs slot.

HeadingKPIsActions
View block
Navigation & shellPackage

Quick view

Floating and non-modal push inspectors with record navigation and host-owned content.

InspectorPush layoutRecords
View block
Forms & actionsPackage

Segmented

An accessible segmented control with roving keyboard selection, disabled options and tab semantics.

KeyboardTablistViews
View block
Navigation & shellPackage

Sidebar account

Expanded and compact account footers with presence, initials and a composable account menu.

AccountPresenceMenu
View block
Data displayPackage

Tenant activity heatmap

A deterministic twelve-month activity grid with summary metrics and accessible day details.

ActivityTwelve monthsTooltips
View block
Navigation & shellPackage

Topbar

A responsive application topbar with search, scope, notifications, theme and user controls.

ShellSearchControls
View block
Built with intention. Shared with the team.GauchoCode UI Gallery ✳