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.
Interactive form elements for data input with validation and dynamic behavior.
| 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 |
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 |
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, slideover, and dialog components for overlay interfaces.
| Component | Purpose | Category |
|---|---|---|
CroutonButton | Interactive button with actions | Modal |
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 |
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 |
Click any category below to view complete documentation with props, slots, events, examples, and customization options: