nuxt/ui

Features

• Chat State Managers - Manages full conversation state on the client, including sending messages and handling streamed parts.
• Calendars And Dates - Ships a calendar component for selecting a single date with locale-aware formatting and keyboard navigation.
• Form Validation - Validates form data using user-defined functions that return errors keyed to specific form fields.
• Accessible UI Components - Ships over 125 production-ready, WAI-ARIA compliant components built on accessible primitives.
• Tailwind CSS Integration - Provides a complete design system with Tailwind CSS theming, dark mode, and custom color palettes.
• Date Pickers - Combines a calendar with a button and popover for selecting a date from a dropdown.
• Date Range Schedulers - Combines a calendar with a button, popover, and preset range shortcuts for selecting date intervals.
• Checkbox Inputs - Ships a checkbox component with indeterminate state support via v-model binding.
• Form State Management - Controls form submission data transformations and enables explicit nested form handling.
• Navigation Headers - Ships a page header component with customizable slots and a collapsible navigation menu.
• Color Modes - Switches between light and dark color modes using built-in components or a composable for custom implementations.
• Component Appearance Customizers - Adjusts colors, sizes, and variants through a type-safe design system built on utility-first CSS and variants.
• Autocomplete Inputs - Provides a text input that displays real-time suggestions from a provided list as the user types.
• Theme Switchers - Switches between light and dark color schemes using a composable or built-in UI components.
• Ecosystem Integrations - Connects with Nuxt modules for icons, fonts, color modes, internationalization, and content while maintaining SSR compatibility.
• Form Validation Libraries - Validates form data against standard schemas from Zod or Valibot, displaying errors automatically on associated fields.
• Server-Side Rendering Support - Components render on the server without hydration issues, ensuring SSR compatibility.
• Vue Component Libraries - Provides a full component library usable in any Vue project via Vite plugins.
• Streaming Chat Responses - Ships a component that streams AI responses with text, reasoning, and tool calls in real time.
• Tool Call Executions - Enables AI to call external tools via the Model Context Protocol for documentation searches or custom tasks.
• Collapsible Reasoning Displays - Provides a collapsible block that displays AI reasoning content, auto-opening during streaming.
• Collapsible Reasoning Displays - Ships a collapsible block that shows the AI's internal reasoning steps for user inspection.
• Nested Form Validation - Validates a group of nested forms together so that validating the parent automatically validates all children.
• Icon Support - Renders icons from the Iconify collection by name, supporting thousands of open-source icons.
• Dynamic Locale Switching - Provides a locale selector dropdown that switches the active language across the application.
• Prompt Submissions - Provides a button that submits the current text prompt and manages the chat's submission status automatically.
• Feature Comparison Cards - Displays pricing tier features, price, and call-to-action in a structured card layout for easy comparison.
• Grid Layouts - Arranges pricing plans into a responsive grid layout with automatically calculated columns.
• Responsive Table Layouts - Shows tiered pricing plans in a horizontal table on desktop and a vertical card layout on mobile.
• Feature Groupings - Groups pricing features into logical categories with per-tier availability indicators.
• Custom Field Filters - Filters autocomplete suggestions based on user-defined object properties beyond the display label.
• On-Demand Subset Loading - Fetches suggestion data from an external API only when the menu is opened or scrolled.
• Step Labels - Renders named step labels beneath the progress bar for multi-step workflows.
• Project Bootstrapping Templates - Provides pre-built project templates for dashboards, SaaS, and landing pages.
• Task Progress Indicators - Displays a visual bar that fills as a numeric value increases toward a configurable maximum.
• Assistant Processing - Displays a visual indicator that changes based on whether the assistant is submitting, streaming, ready, or in an error state.
• Typed Message Part Displays - Shows message content using a typed format with distinct parts like text, reasoning, and files.
• Timeline Renderers - Ships a changelog component that renders version entries as a scroll-tracking vertical timeline.
• List Virtualization - Implements list virtualization to render only visible items for smooth scrolling performance.
• Auto-Scroll Buttons - Shows a floating button when the user scrolls up, allowing a single click to jump back to the latest messages.
• Chat Message List Renderers - Renders a scrollable list of chat messages with automatic scrolling to the latest message as new ones arrive.
• Chat Message Renderers - Renders a chat message for a user or assistant role with an icon, avatar, and hover actions.
• Checkbox Components - Adjusts the checkbox's color, size, variant, icon, and indicator position through configurable props.
• Runtime Color Swaps - Swaps semantic color values dynamically through app configuration without restarting the server.
• Semantic Color Mappings - Maps purpose-driven color names like primary, success, or error to any palette color for consistent component theming.
• Date Range Restrictions - Ships a calendar component that limits selectable dates to a configurable minimum and maximum window.
• Date Blacklisting - Ships a calendar component that prevents selection of specific dates, months, or years via a validation function.
• Figma Component Kits - Includes a Figma kit that mirrors the code components for design-to-development consistency.
• Theme Token Definitions - Defines design tokens such as colors, fonts, and breakpoints using the @theme directive in CSS.
• Link Columns - Renders labeled columns of navigable links inside a footer area for site-wide navigation.
• Icon Collections - Displays icons from the Iconify library by passing collection and name to a dedicated component.
• Local SVG Registrations - Registers a folder of local SVG files as a custom Iconify collection for use in components.
• Icon Libraries - Displays icons from the Iconify collection using a name prop, supporting over 200,000 icons.
• Verification Code Inputs - Provides a code input component that auto-advances focus as each character is entered.
• Prompt Submissions - Provides a chat prompt component that submits text when the user presses Enter or clicks a button.
• Theme-Aware Content Displays - Switches displayed images and elements based on the active light or dark theme.
• Internationalization Frameworks - Provides built-in internationalization support for localizing UI text into over 50 languages.
• Custom Item Creators - Lets users type and add custom values not present in the predefined list of options.
• Masked Inputs - Provides a code input component that masks characters as dots or asterisks for sensitive values.
• Numeric Inputs - Adjusts a number up or down within a configurable range using buttons or keyboard input.
• Page Footers - Renders a semantic footer element with customizable slots for navigation links and copyright text.
• Pagination Navigation - Provides pagination controls with numbered page buttons and navigation arrows.
• OTP Inputs - Includes OTP input fields with autocomplete and clipboard detection for mobile devices.
• Progress Value Displays - Shows the current numeric value above the progress bar for exact progress reading.
• Indeterminate Indicators - Animates a bar with a looping motion when the exact progress value is unknown.
• Multiple Selections - Ships a multi-select component that presents checkboxes for picking several items from a list.
• Icon Components - Embeds icons into UI elements like buttons through a built-in icon prop on components.
• Tag Inputs - Provides a tag input component that renders each entry as a removable tag.
• Chat Message Role Stylers - Provides separate configuration props to apply distinct styling and alignment to user and assistant messages.
• Chat Message Stylers - Changes the message style through variant, color, and side props for left or right alignment.
• Chat Loading Indicators - Allows replacing the default processing animation with a custom slot for chat message loading states.
• Color Palettes - Overrides any default color from the Tailwind palette by redefining its full shade range in the @theme block.
• Badge Indicators - Ships a badge component that displays numeric counts overlaid on other elements.
• Loading Placeholders - Shows pulsing placeholder shapes while content is loading to indicate activity.
• Visibility Toggles - Ships a disclosure component that toggles content visibility with smooth transitions.
• Real-time Validation - Triggers validation on input, change, or blur events, configurable via a prop, and always validates on submit.
• Vue Icon Libraries - Accepts Vue components as icon sources, allowing inline SVG definitions or imports from SVG files.

سجل النجوم