Component Explorer -- Navigating the UI Library

Help the designer understand what components exist, how they look, what variants they have, and where to find them. Describe everything in visual terms, not code terms.

Triggers

Activate when the designer asks:

"Show me all the buttons"
"What components do we have?"
"Where is the sidebar?"
"Find the engagement card"
"What does the badge look like?"
"List all the form inputs"
"Explore the design system"
"What can I use for [purpose]?"

Component Map

UI Primitives (`elephant-ai/apps/web/src/components/ui/`)

These are the building blocks. Every other component is composed from these.

Layout & Containers:

card.tsx -- Bordered surface with shadow, has Header/Content/Footer sections
dialog.tsx -- Modal overlay with backdrop
drawer.tsx -- Slide-in panel from screen edge
sheet.tsx -- Side panel overlay
separator.tsx -- Visual divider line
scroll-area.tsx -- Scrollable container with styled scrollbar
resizable.tsx -- Resizable split panels
accordion.tsx -- Collapsible content sections
tabs.tsx -- Tab navigation with content panels

Actions:

button.tsx -- 8 variants: default, primary-blue, outline, secondary, ghost, destructive, destructive-ghost, link
button-group.tsx -- Grouped buttons with consistent sizing
text-button.tsx -- Minimal text-style button
text-link.tsx -- Styled hyperlink

Form Inputs:

input.tsx -- Standard text input
textarea.tsx -- Multi-line text input
select.tsx -- Dropdown select
checkbox.tsx -- Checkbox with label
radio-group.tsx -- Radio button group
switch.tsx -- Toggle switch
slider.tsx -- Range slider
combobox.tsx -- Searchable dropdown
multi-select.tsx -- Multi-value select with tags
search-input.tsx -- Input with search icon
date-picker.tsx -- Date selection
date-range-picker.tsx -- Date range selection
date-time-picker.tsx -- Date and time selection
calendar.tsx -- Calendar grid for date pickers
form.tsx -- Form wrapper with validation
label.tsx -- Form field label

Display:

badge.tsx -- Status/category indicator (multiple color variants)
avatar.tsx -- User/entity avatar (image or initials)
tag.tsx -- Removable tag/chip
alert.tsx -- Informational banner with icon
alert-dialog.tsx -- Confirmation dialog
tooltip.tsx -- Hover information popup
hover-card.tsx -- Rich hover popup with content
popover.tsx -- Anchored popup container
progress.tsx -- Progress bar
skeleton.tsx -- Loading placeholder
spinner.tsx -- Loading spinner
table.tsx -- Data table

Navigation:

dropdown-menu.tsx -- Context/action menu
command.tsx -- Command palette (Cmd+K style)
sidebar.tsx -- Application sidebar

Feedback:

sonner.tsx -- Toast notifications

Typography:

tokens/typography.tsx -- Semantic type variants (h1-h4, p, lead, large, small, extraSmall, tiny)

Media:

styled-video-player.tsx -- Video player with controls
meeting-clip-slider.tsx -- Meeting clip scrubber

Effects:

text-shimmer.tsx -- Shimmering text effect
typewriter.tsx -- Typewriter text animation

Feature Components

Directory	What it contains	Key components
`chat/`	AI chat interface	Chat messages, input, thread, suggestions
`engagements/`	Meeting/call views	Engagement cards, timelines, transcripts
`workflows/`	Workflow builder	Flow editor, nodes, triggers, actions
`navigation/`	App navigation	Sidebar, top nav, breadcrumbs
`person/`	Contact views	Person cards, details, activity
`company/`	Company views	Company cards, details
`signals/`	Signal UI	Signal cards, lists, details
`ai-elements/`	AI-specific UI	AI badges, suggestions, confidence
`onboarding/`	First-run experience	Setup wizard, welcome screens
`filters/`	Data filtering	Filter bars, dropdowns, chips
`projects/`	Project views	Project cards, boards
`tags/`	Tag management	Tag pickers, lists
`prototypes/`	PM prototypes	AgentCommandCenter, ClientUsageMetrics, etc.

How to Explore

"Show me all [component type]"

List the components with a brief visual description
Mention how many variants each has
Note which have Storybook stories (check for *.stories.tsx)
Suggest opening Storybook to see them rendered

"What does [component] look like?"

Read the component file
Describe it visually: size, colors, spacing, states
List all variants/sizes available
Mention the Storybook story if one exists

"Where is [feature]?"

Search the component directory for the feature name
Read the component to understand its structure
Describe what it does and what it looks like
Show how it relates to other components (what it contains, what contains it)

"What should I use for [purpose]?"

Consider the purpose and context
Recommend the best component(s) from the library
Explain why this component is the right fit
Note any variants that would work well
If no existing component fits, describe what would need to be created

Describing Components

When describing a component, always include:

Visual appearance: What it looks like (shape, color, size)
Content: What information it displays
Variants: Different visual modes (size, color, style)
States: How it looks when loading, empty, disabled, error
Interactions: What happens when you click, hover, focus
Responsive behavior: How it adapts on mobile
Context: Where it appears in the app (what screens, what parent containers)

Example:

"The Badge component is a small pill-shaped label used for status and categories. It comes in several variants:

Default: Dark background with light text (our primary-dark color)
Outline: Bordered with transparent background
Status colors: Success (emerald), Warning (amber), Error (rose), Info (blue)
Category colors: Rose, orange, yellow, lime, green, teal, blue, indigo, fuchsia, purple, stone

Badges have two sizes: small (about 20px tall) and medium (about 24px tall). They pair well with icons at h-3 w-3 size.

You can see all variants in Storybook under the 'ui / Badge' section."

Storybook Navigation Guide

When the designer is looking at Storybook, help them navigate:

Storybook location	What they'll find
`ui/`	All design system primitives
`ui/Button`	All button variants and sizes
`ui/Card`	Card layouts and compositions
`ui/Badge`	Status and category badges
`ui/Dialog`	Modal dialog patterns
`ui/Form`	Form field patterns
Toolbar > Viewport	Switch between mobile/tablet/desktop
Toolbar > Theme	Toggle light/dark mode
Controls panel (bottom)	Toggle props to change component state

Comparing Similar Components

When the designer asks "should I use X or Y?", compare them:

Visual differences (what they look like)
Semantic differences (what they communicate)
Interaction differences (how they behave)
Context differences (where they're typically used)

Recommend the best fit based on the designer's specific use case.

skylar-component-explorer