HaimKortovich
a2eb1f3789
- Add nuxt-skills (vue, nuxt, nuxt-ui) to .claude/skills/ - Create useCustomerSelection() composable for managing insured/buyer selection - Create usePolicyApi() composable for policy API operations - Update auto quote components to use insured/buyer instead of client - Update vehicle fields: remove valorVehiculo, add market_value, requested_value, rc_limits - Make chassis_number and engine_number optional - Update auto quote types and composables to match new API structure - Update auto quote page to submit to policy API with new structure
162 lines
22 KiB
Markdown
162 lines
22 KiB
Markdown
# Components
|
|
|
|
> Auto-generated from Nuxt UI docs. Run `npx tsx skills/nuxt-ui/scripts/generate-components.ts` to update.
|
|
|
|
> **For headless primitives (API, accessibility):** see `reka-ui` skill
|
|
|
|
## Data
|
|
|
|
| Component | Description |
|
|
| --------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
| [Accordion](components/accordion.md) | A stacked set of collapsible panels. |
|
|
| [Carousel](components/carousel.md) | A carousel with motion and swipe built using Embla. |
|
|
| [Empty](components/empty.md) | A component to display an empty state. (v4.1+) |
|
|
| [Marquee](components/marquee.md) | A component to create infinite scrolling content. |
|
|
| [ScrollArea](components/scroll-area.md) | A flexible scroll container with virtualization support. (v4.3+) |
|
|
| [Table](components/table.md) | A responsive table element to display data in rows and columns. |
|
|
| [Timeline](components/timeline.md) | A component that displays a sequence of events with dates, titles, icons or avatars. |
|
|
| [Tree](components/tree.md) | A tree view component to display and interact with hierarchical data structures. |
|
|
| [User](components/user.md) | Display user information with name, description and avatar. |
|
|
|
|
## Element
|
|
|
|
| Component | Description |
|
|
| ----------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
| [Alert](components/alert.md) | A callout to draw user's attention. |
|
|
| [Avatar](components/avatar.md) | An img element with fallback and Nuxt Image support. |
|
|
| [AvatarGroup](components/avatar-group.md) | Stack multiple avatars in a group. |
|
|
| [Badge](components/badge.md) | A short text to represent a status or a category. |
|
|
| [Banner](components/banner.md) | Display a banner at the top of your website to inform users about important information. |
|
|
| [Button](components/button.md) | A button element that can act as a link or trigger an action. |
|
|
| [Calendar](components/calendar.md) | A calendar component for selecting single dates, multiple dates or date ranges. |
|
|
| [Card](components/card.md) | Display content in a card with a header, body and footer. |
|
|
| [Chip](components/chip.md) | An indicator of a numeric value or a state. |
|
|
| [Collapsible](components/collapsible.md) | A collapsible element to toggle visibility of its content. |
|
|
| [FieldGroup](components/field-group.md) | Group multiple button-like elements together. |
|
|
| [Icon](components/icon.md) | A component to display any icon from Iconify or another component. |
|
|
| [Kbd](components/kbd.md) | A kbd element to display a keyboard key. |
|
|
| [Progress](components/progress.md) | An indicator showing the progress of a task. |
|
|
| [Separator](components/separator.md) | Separates content horizontally or vertically. |
|
|
| [Skeleton](components/skeleton.md) | A placeholder to show while content is loading. |
|
|
|
|
## Form
|
|
|
|
| Component | Description |
|
|
| --------------------------------------------- | ------------------------------------------------------------------------ |
|
|
| [Checkbox](components/checkbox.md) | An input element to toggle between checked and unchecked states. |
|
|
| [CheckboxGroup](components/checkbox-group.md) | A set of checklist buttons to select multiple option from a list. |
|
|
| [ColorPicker](components/color-picker.md) | A component to select a color. |
|
|
| [FileUpload](components/file-upload.md) | An input element to upload files. |
|
|
| [Form](components/form.md) | A form component with built-in validation and submission handling. |
|
|
| [FormField](components/form-field.md) | A wrapper for form elements that provides validation and error handling. |
|
|
| [Input](components/input.md) | An input element to enter text. |
|
|
| [InputDate](components/input-date.md) | An input component for date selection. (v4.2+) |
|
|
| [InputMenu](components/input-menu.md) | An autocomplete input with real-time suggestions. |
|
|
| [InputNumber](components/input-number.md) | An input for numerical values with a customizable range. |
|
|
| [InputTags](components/input-tags.md) | An input element that displays interactive tags. |
|
|
| [InputTime](components/input-time.md) | An input for selecting a time. (v4.2+) |
|
|
| [PinInput](components/pin-input.md) | An input element to enter a pin. |
|
|
| [RadioGroup](components/radio-group.md) | A set of radio buttons to select a single option from a list. |
|
|
| [Select](components/select.md) | A select element to choose from a list of options. |
|
|
| [SelectMenu](components/select-menu.md) | An advanced searchable select element. |
|
|
| [Slider](components/slider.md) | An input to select a numeric value within a range. |
|
|
| [Switch](components/switch.md) | A control that toggles between two states. |
|
|
| [Textarea](components/textarea.md) | A textarea element to input multi-line text. |
|
|
|
|
## Layout
|
|
|
|
| Component | Description |
|
|
| ------------------------------------ | -------------------------------------------------------------------- |
|
|
| [App](components/app.md) | Wraps your app to provide global configurations and more. |
|
|
| [Container](components/container.md) | A container lets you center and constrain the width of your content. |
|
|
| [Error](components/error.md) | A pre-built error component with NuxtError support. |
|
|
| [Footer](components/footer.md) | A responsive footer component. |
|
|
| [Header](components/header.md) | A responsive header component. |
|
|
| [Main](components/main.md) | A main element that fills the available viewport height. |
|
|
|
|
## Navigation
|
|
|
|
| Component | Description |
|
|
| ----------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
| [Breadcrumb](components/breadcrumb.md) | A hierarchy of links to navigate through a website. |
|
|
| [CommandPalette](components/command-palette.md) | A command palette with full-text search powered by Fuse.js for efficient fuzzy matching. |
|
|
| [FooterColumns](components/footer-columns.md) | A list of links as columns to display in your Footer. |
|
|
| [Link](components/link.md) | A wrapper around <NuxtLink> with extra props. |
|
|
| [NavigationMenu](components/navigation-menu.md) | A list of links that can be displayed horizontally or vertically. |
|
|
| [Pagination](components/pagination.md) | A list of buttons or links to navigate through pages. |
|
|
| [Stepper](components/stepper.md) | A set of steps that are used to indicate progress through a multi-step process. |
|
|
| [Tabs](components/tabs.md) | A set of tab panels that are displayed one at a time. |
|
|
|
|
## Other
|
|
|
|
| Component | Description | Version |
|
|
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------- |
|
|
| [AuthForm](components/auth-form.md) | A customizable Form to create login, register or password reset forms. | |
|
|
| [BlogPost](components/blog-post.md) | A customizable article to display in a blog page. | |
|
|
| [BlogPosts](components/blog-posts.md) | Display a list of blog posts in a responsive grid layout. | |
|
|
| [ChangelogVersion](components/changelog-version.md) | A customizable article to display in a changelog. | |
|
|
| [ChangelogVersions](components/changelog-versions.md) | Display a list of changelog versions in a timeline. | |
|
|
| [ChatMessage](components/chat-message.md) | Display a chat message with icon, avatar, and actions. | |
|
|
| [ChatMessages](components/chat-messages.md) | Display a list of chat messages, designed to work seamlessly with Vercel AI SDK. | |
|
|
| [ChatPalette](components/chat-palette.md) | A chat palette to create a chatbot interface inside an overlay. | |
|
|
| [ChatPrompt](components/chat-prompt.md) | An enhanced Textarea for submitting prompts in AI chat interfaces. | |
|
|
| [ChatPromptSubmit](components/chat-prompt-submit.md) | A Button for submitting chat prompts with automatic status handling. | |
|
|
| [ColorModeAvatar](components/color-mode-avatar.md) | An Avatar with a different source for light and dark mode. | |
|
|
| [ColorModeButton](components/color-mode-button.md) | A Button to switch between light and dark mode. | |
|
|
| [ColorModeImage](components/color-mode-image.md) | An image element with a different source for light and dark mode. | |
|
|
| [ColorModeSelect](components/color-mode-select.md) | A Select to switch between system, dark & light mode. | |
|
|
| [ColorModeSwitch](components/color-mode-switch.md) | A switch to toggle between light and dark mode. | |
|
|
| [ContentNavigation](components/content-navigation.md) | An accordion-style navigation component for organizing page links. | |
|
|
| [ContentSearch](components/content-search.md) | A ready to use CommandPalette to add to your documentation. | |
|
|
| [ContentSearchButton](components/content-search-button.md) | A pre-styled Button to open the ContentSearch modal. | |
|
|
| [ContentSurround](components/content-surround.md) | A pair of prev and next links to navigate between pages. | |
|
|
| [ContentToc](components/content-toc.md) | A sticky Table of Contents with automatic active anchor link highlighting. | |
|
|
| [DashboardGroup](components/dashboard-group.md) | A fixed layout component that provides context for dashboard components with sidebar state management and persistence. | |
|
|
| [DashboardNavbar](components/dashboard-navbar.md) | A responsive navbar to display in a dashboard. | |
|
|
| [DashboardPanel](components/dashboard-panel.md) | A resizable panel to display in a dashboard. | |
|
|
| [DashboardResizeHandle](components/dashboard-resize-handle.md) | A handle to resize a sidebar or panel. | |
|
|
| [DashboardSearch](components/dashboard-search.md) | A ready to use CommandPalette to add to your dashboard. | |
|
|
| [DashboardSearchButton](components/dashboard-search-button.md) | A pre-styled Button to open the DashboardSearch modal. | |
|
|
| [DashboardSidebar](components/dashboard-sidebar.md) | A resizable and collapsible sidebar to display in a dashboard. | |
|
|
| [DashboardSidebarCollapse](components/dashboard-sidebar-collapse.md) | A Button to collapse the sidebar on desktop. | |
|
|
| [DashboardSidebarToggle](components/dashboard-sidebar-toggle.md) | A Button to toggle the sidebar on mobile. | |
|
|
| [DashboardToolbar](components/dashboard-toolbar.md) | A toolbar to display under the navbar in a dashboard. | |
|
|
| [Editor](components/editor.md) | A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types. (v4.3+) | v4.3+ |
|
|
| [EditorDragHandle](components/editor-drag-handle.md) | A draggable handle for reordering and selecting blocks in the editor. (v4.3+) | v4.3+ |
|
|
| [EditorEmojiMenu](components/editor-emoji-menu.md) | An emoji picker menu that displays emoji suggestions when typing the : character in the editor. (v4.3+) | v4.3+ |
|
|
| [EditorMentionMenu](components/editor-mention-menu.md) | A mention menu that displays user suggestions when typing the @ character in the editor. (v4.3+) | v4.3+ |
|
|
| [EditorSuggestionMenu](components/editor-suggestion-menu.md) | A command menu that displays formatting and action suggestions when typing the / character in the editor. (v4.3+) | v4.3+ |
|
|
| [EditorToolbar](components/editor-toolbar.md) | A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu. (v4.3+) | v4.3+ |
|
|
| [LocaleSelect](components/locale-select.md) | A Select to switch between locales. | |
|
|
| [Page](components/page.md) | A grid layout for your pages with left and right columns. | |
|
|
| [PageAnchors](components/page-anchors.md) | A list of anchors to be displayed in the page. | |
|
|
| [PageAside](components/page-aside.md) | A sticky aside to display your page navigation. | |
|
|
| [PageBody](components/page-body.md) | The main content of your page. | |
|
|
| [PageCard](components/page-card.md) | A pre-styled card component that displays a title, description and optional link. | |
|
|
| [PageColumns](components/page-columns.md) | A responsive multi-column layout system for organizing content side-by-side. | |
|
|
| [PageCta](components/page-cta.md) | A call to action section to display in your pages. | |
|
|
| [PageFeature](components/page-feature.md) | A component to showcase key features of your application. | |
|
|
| [PageGrid](components/page-grid.md) | A responsive grid system for displaying content in a flexible layout. | |
|
|
| [PageHeader](components/page-header.md) | A responsive header for your pages. | |
|
|
| [PageHero](components/page-hero.md) | A responsive hero for your pages. | |
|
|
| [PageLinks](components/page-links.md) | A list of links to be displayed in the page. | |
|
|
| [PageList](components/page-list.md) | A vertical list layout for displaying content in a stacked format. | |
|
|
| [PageLogos](components/page-logos.md) | A list of logos or images to display on your pages. | |
|
|
| [PageSection](components/page-section.md) | A responsive section for your pages. | |
|
|
| [PricingPlan](components/pricing-plan.md) | A customizable pricing plan to display in a pricing page. | |
|
|
| [PricingPlans](components/pricing-plans.md) | Display a list of pricing plans in a responsive grid layout. | |
|
|
| [PricingTable](components/pricing-table.md) | A responsive pricing table component that displays tiered pricing plans with feature comparisons. | |
|
|
|
|
## Overlay
|
|
|
|
| Component | Description |
|
|
| ------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
| [ContextMenu](components/context-menu.md) | A menu to display actions when right-clicking on an element. |
|
|
| [Drawer](components/drawer.md) | A drawer that smoothly slides in & out of the screen. |
|
|
| [DropdownMenu](components/dropdown-menu.md) | A menu to display actions when clicking on an element. |
|
|
| [Modal](components/modal.md) | A dialog window that can be used to display a message or request user input. |
|
|
| [Popover](components/popover.md) | A non-modal dialog that floats around a trigger element. |
|
|
| [Slideover](components/slideover.md) | A dialog that slides in from any side of the screen. |
|
|
| [Toast](components/toast.md) | A succinct message to provide information or feedback to the user. |
|
|
| [Tooltip](components/tooltip.md) | A popup that reveals information when hovering over an element. |
|