Components
Last updated on 2026-02-25
The AI Feedback Assistant includes 136+ components — the full SaaS Starter Kit library plus demo-specific pages that show how everything works together in a real application.
Component Overview
| Tier | Count | Inherited From |
|---|---|---|
| Primitives | 23 | AI UX Kit + SaaS Starter Kit |
| Composites | 27 | AI UX Kit + SaaS Starter Kit |
| Recipes | 56 | AI UX Kit + SaaS Starter Kit |
| Templates | 30 | SaaS Starter Kit + 1 extra |
Demo-Specific Pages
These pages are unique to the AI Feedback Assistant and show how components come together:
Home Dashboard
The /home page demonstrates:
- Sidebar navigation with section links
- Topbar with user avatar and notifications
- Data table with sortable columns
- Charts for analytics display
- Cards for key metrics
Onboarding Flow
The /onboarding page shows:
- Multi-step wizard using Dialog or Sheet
- Progress indicator with Progress Bar
- Form inputs with Field, Input, Select
- Welcome message with Avatar and personalization
Notification Center
The /notifications page combines:
- Notification list with read/unread states
- Filter tabs (All, Unread, Mentions)
- Individual notification items with timestamps
- Mark all as read action
Authentication Pages
Root-level auth pages at /authentication/:
| Page | Components Used |
|---|---|
| Login | Input, Button, Divider, social login buttons |
| Signup | Input, Checkbox (terms), Button |
| OTP | OTP Input (6-digit), Button, countdown timer |
| Forgot Password | Input (email), Button |
| Reset Password | Input (password + confirm), Button |
AI Chat Components in Action
The demo showcases all AI recipe components in a real context:
Prompt Submission
Multiple prompt input patterns — single-line, multi-line, with attachments, with template selection, and command palette.
Citation Display
Source attribution showing where AI responses come from, with expandable reference cards and footnotes.
Voice Input
Microphone activation with real-time transcription display and audio waveform visualization.
File Upload
Drag-and-drop file upload with progress indicators, file type validation, and preview thumbnails.
Response Comparison
Side-by-side AI response comparison with diff highlighting and preference selection.
Error Handling
Graceful error states showing retry options, fallback content, and error boundaries.
Session Management
Chat history list, session creation, and conversation switching.
Browsing Components
Run npm run dev and navigate to:
/composites— browse all 27 composite components/primitives— browse all 23 primitives/recipes— browse all recipe categories/templates— browse dropdown and modal templates
Each demo page shows the component in isolation with different variants and states.