Reference for all available UI components in the Shep AI web interface.
components/ui/)shadcn/ui primitives managed by the shadcn CLI. Most have colocated .stories.tsx files.
| Component | File | Description |
|---|---|---|
| Accordion | accordion.tsx |
Collapsible content sections |
| AlertDialog | alert-dialog.tsx |
Confirmation dialogs for destructive actions |
| Alert | alert.tsx |
Feedback messages with semantic variants (default, destructive) |
| Badge | badge.tsx |
Status indicators (default, secondary, outline, destructive) |
| Button | button.tsx |
Action buttons (default, destructive, outline, ghost, link + sizes) |
| Card | card.tsx |
Container with header, content, footer sections |
| CheckboxGroup | checkbox-group.tsx |
Grouped checkbox inputs |
| CheckboxGroupItem | checkbox-group-item.tsx |
Individual item within checkbox group |
| Checkbox | checkbox.tsx |
Single checkbox input |
| CometSpinner | comet-spinner.tsx |
Animated comet-style loading spinner |
| Command | command.tsx |
Command palette / combobox primitive |
| Dialog | dialog.tsx |
Modal dialogs for focused interactions |
| Drawer | drawer.tsx |
Slide-out drawer panel |
| DropdownMenu | dropdown-menu.tsx |
Dropdown menu with items |
| Input | input.tsx |
Text input fields |
| Label | label.tsx |
Accessible form field labels |
| Popover | popover.tsx |
Floating content panels |
| ScrollArea | scroll-area.tsx |
Custom scrollable container |
| Select | select.tsx |
Dropdown selection |
| Separator | separator.tsx |
Visual divider |
| Sheet | sheet.tsx |
Side sheet overlay |
| Sidebar | sidebar.tsx |
Sidebar primitive (shadcn sidebar component) |
| Skeleton | skeleton.tsx |
Loading placeholder skeleton |
| Sonner | sonner.tsx |
Toast notifications (via sonner library) |
| Spinner | spinner.tsx |
Loading spinner |
| Switch | switch.tsx |
Toggle switch |
| Tabs | tabs.tsx |
Tabbed content navigation |
| Textarea | textarea.tsx |
Multi-line text input |
| Tooltip | tooltip.tsx |
Hover tooltip |
// Import directly from the component file
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
pnpm dlx shadcn@latest add [component-name]
components/common/)Cross-feature composed components built from ui/ primitives. Each lives in its own subfolder with colocated stories and index.ts barrel export.
Styled action button with icon support.
common/action-button/Button to add a new repository to the workspace.
common/add-repository-button/Card display for file attachments.
common/attachment-card/Compact chip display for inline attachment references.
common/attachment-chip/Base drawer component used as foundation for all drawer variants.
common/base-drawer/Badge showing CI/CD pipeline status.
common/ci-status-badge/Orchestrator for drawer views (feature, repository, create).
common/control-center-drawer/create-drawer-client.tsx, feature-drawer-client.tsx, repository-drawer-client.tsx, drawer-view.tsConfirmation dialog for feature deletion.
common/delete-feature-dialog/Badge showing deployment status.
common/deployment-status-badge/Action bar within drawers (approve, reject, etc.).
common/drawer-action-bar/Input for revision/feedback text within drawers.
common/drawer-revision-input/Icon mappings for different editor/IDE types.
common/editor-type-icons.tsx (single file, not a subfolder)Live-updating elapsed time display.
common/elapsed-time/Placeholder for pages or sections with no content.
common/empty-state/icon? (Lucide icon), title (required), description?, action? (ReactNode)Drawer form for creating new features with attachments.
common/feature-create-drawer/Feature detail drawer with tabbed content.
common/feature-drawer/Tab navigation for the feature drawer (overview, activity, approval, rejection, pr-info, deployment, timeline).
common/feature-drawer-tabs/Sidebar list item representing a feature with status and elapsed time.
common/feature-list-item/React Flow canvas node representing a feature with state-driven styling.
common/feature-node/Status badge components for feature lifecycle states.
common/feature-status-badges/Configuration mapping feature states to colors and labels.
common/feature-status-config.ts (single file)Grouped list of features by status in the sidebar.
common/feature-status-group/Inline display of attachment list.
common/inline-attachments/Content placeholder shown during loading states.
common/loading-skeleton/variant (text, card, list, page), lines?, className?Merge review UI components.
common/merge-review/Menu for opening items in IDE, shell, or browser.
common/open-action-menu/Consistent page header with title, optional description, and action slot.
common/page-header/title (required), description?, actions? (ReactNode)PRD (Product Requirements Document) questionnaire form.
common/prd-questionnaire/Summary display for product decisions.
common/product-decisions-summary/Dialog for providing rejection feedback.
common/reject-feedback-dialog/React Flow canvas node representing a repository.
common/repository-node/Log viewer component for server/agent logs.
common/server-log-viewer/Shep branding logo component.
common/shep-logo/Toggle button for collapsing/expanding the sidebar.
common/sidebar-collapse-toggle/Navigation item for the sidebar menu.
common/sidebar-nav-item/Section header within the sidebar.
common/sidebar-section-header/Toggle for enabling/disabling UI notification sounds.
common/sound-toggle/Progress view for task/agent execution steps.
common/task-progress-view/Review UI for technical decisions.
common/tech-decisions-review/Toggle between light, dark, and system theme modes.
common/theme-toggle/useTheme hook, Button (ghost variant), Lucide icons (Sun/Moon)Badge displaying the current version.
common/version-badge/components/layouts/)Page shells and structural wrappers. Each in its own subfolder with stories and barrel export.
Top-level application wrapper integrating sidebar and main content area.
layouts/app-shell/children (page content)Application sidebar with feature list, navigation, and status groups.
layouts/app-sidebar/Full-page shell combining sidebar and content area with React Flow canvas.
layouts/dashboard-layout/Top navigation bar.
layouts/header/Base sidebar layout component.
layouts/sidebar/components/features/)Domain-specific UI components organized by bounded context.
Main control center orchestrating the dashboard view.
control-center.tsx) – Top-level control center componentcontrol-center-inner.tsx) – Inner component wiring callbacks and statecontrol-center-empty-state.tsx) – Empty state when no features existuse-control-center-state.ts) – Hook managing graph state, server actions, and SSE eventsReact Flow canvas for visualizing features and repositories.
features-canvas.tsx) – React Flow canvas rendering feature and repository nodesdependency-edge.tsx) – Custom edge component for feature dependenciesSettings page sections.
settings-page-client.tsx) – Client-side settings pageagent-settings-section.tsx) – Agent configuration sectiondatabase-settings-section.tsx) – Database info sectionenvironment-settings-section.tsx) – Environment settingsfeature-flags-settings-section.tsx) – Feature flagsnotification-settings-section.tsx) – Notification preferencesworkflow-settings-section.tsx) – Workflow defaultsAgentModelPicker/) – Agent and model picker componentModelPicker/) – LLM model picker componentSkills page components.
skills-page-client.tsx) – Skills listing pageskill-list.tsx) – List of available skillsskill-card.tsx) – Individual skill cardskill-detail-drawer.tsx) – Skill detail drawercategory-filter.tsx) – Category filter for skillsTools page components.
tools-page-client.tsx) – Tools listing pagetool-card.tsx) – Individual tool card with install statustool-detail-drawer.tsx) – Tool detail drawerversion/version-page-client.tsx) – Client-side version display pageView all components with interactive examples:
pnpm dev:storybook
Opens at http://localhost:6006 with: