Components Reference
Complete reference for all Nuxt Crouton UI components
Nuxt Crouton provides a comprehensive set of UI components built on top of Nuxt UI. These components are designed for rapid CRUD interface development with built-in accessibility, responsiveness, and customization options.
Quick Reference
Form Components
Interactive form elements for data input with validation and dynamic behavior.
See Form Components for complete CroutonForm documentation with all props, slots, and examples.
| Component | Purpose | Category |
|---|---|---|
CroutonForm | Main form component with validation | Form |
FormDynamicLoader | Dynamically load form fields | Form |
FormLayout | Form layout wrapper | Form |
FormReferenceSelect | Select with reference data | Form |
CroutonDate | Date picker field | Form |
CroutonImageUpload | Image upload field | Form |
CroutonAvatarUpload | Avatar upload field | Form |
CroutonRepeater | Repeatable form fields | Form |
CroutonAssetsPicker | Multi-asset picker | Form |
CroutonAssetUploader | Asset upload component | Form |
Calendar | Calendar picker | Form |
CroutonCalendar | Enhanced calendar | Form |
CroutonCalendarYear | Year calendar view | Form |
CroutonFormActionButton | Form action buttons | Form |
CroutonFormDependentButtonGroup | Conditional button groups | Form |
CroutonFormDependentFieldLoader | Load fields based on dependencies | Form |
CroutonFormDependentSelectOption | Conditional select options | Form |
CroutonFormExpandableSlideOver | Expandable slideover forms | Form |
CroutonFormDynamicLoader | Dynamic form loader | Form |
CroutonFormLayout | Form layout component | Form |
CroutonFormReferenceSelect | Reference select field | Form |
CroutonFormRepeater | Form repeater component | Form |
CroutonUsersAvatarUpload | User avatar upload | Form |
Table Components
Data table components with sorting, filtering, and pagination.
| Component | Purpose | Category |
|---|---|---|
CroutonTable | Main data table component | Table |
CroutonTableActions | Table action buttons | Table |
CroutonTableCheckbox | Table row selection | Table |
CroutonTableHeader | Table header component | Table |
CroutonTablePagination | Table pagination controls | Table |
CroutonTableSearch | Table search functionality | Table |
Layout Components
Container and card components for organizing content.
| Component | Purpose | Category |
|---|---|---|
CroutonCollection | Collection list view | Layout |
CroutonItemCardMini | Compact item card | Layout |
CroutonDetailLayout | Detail page layout | Layout |
CroutonList | List layout component | Layout |
CardMini | Mini card component | Layout |
CroutonDependentFieldCardMini | Conditional mini cards | Layout |
CroutonItemButtonsMini | Mini card action buttons | [Layout](/api-reference/components/layout-components#croutonitembu ttonsmini) |
CroutonItemDependentField | Conditional item fields | Layout |
CroutonUsersCardMini | User mini card | Layout |
Modal Components
Modal, slideover, and dialog components for overlay interfaces.
| Component | Purpose | Category |
|---|---|---|
CroutonButton | Interactive button with actions | Modal |
Content Components
Components for displaying rich text content, articles, and prose pages.
| Component | Purpose | Category |
|---|---|---|
CroutonContentPreview | Truncated content preview for tables | Content |
CroutonContentPage | Generic content page with prose styling | Content |
CroutonContentArticle | Blog post / article layout | Content |
Utility Components
Helper components for loading states, errors, and special behaviors.
| Component | Purpose | Category |
|---|---|---|
Loading | Loading state indicator | Utility |
ValidationErrorSummary | Form validation errors | Utility |
CroutonCollectionViewer | Collection data viewer | Utility |
CroutonLoading | Loading component | Utility |
CroutonValidationErrorSummary | Validation error display | Utility |
Detailed Documentation
Click any category below to view complete documentation with props, slots, events, examples, and customization options:
Related Resources
- Nuxt UI Components - Base component library documentation
- Nuxt UI Pro - Advanced UI components and templates
- Composables Reference - Composables for component logic
- TypeScript Types - Component prop types and interfaces
- Customization Guide - Customize component appearance and behavior