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