NuxtUI Components
Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts.
What's included
Accordion
Display togglable accordion panels.
Alert
Display an alert element to draw attention.
Avatar
Display an image that represents a resource or a group of resources.
Badge
Display a short text to represent a status or a category.
Breadcrumb
A list of links that indicate the current page's location within a navigational hierarchy.
Button
Create a button with icon or link capabilities.
Card
Display a card for content with a header, body and footer.
Carousel
Display images or content in a scrollable area.
Checkbox
Display a checkbox field.
Chip
Display a chip indicator on any component.
CommandPalette
Add a customizable command palette to your app.
Container
A container lets you center and constrain the width of your content.
ContextMenu
Display a menu that appears on right click.
DatePicker
An example of a date picker component built with v-calendar.
Divider
Display a separator between content.
Dropdown
Display a list of actions in a dropdown menu.
Form
Collect and validate form data.
FormGroup
Display a label and additional informations around a form element.
HorizontalNavigation
Display a list of horizontal links.
Icon
Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.
Input
Display an input field.
InputMenu
Display an autocomplete input with real-time suggestions.
Keyboard Key
Display a keyboard key in a text block.
Link
Render a NuxtLink but with superpowers.
Meter
Display a gauge meter that fills or depletes.
Modal
Display a modal within your application.
Notification
Display a toast notification in your app.
Pagination
Add a pagination to handle pages.
Popover
Display an input field.
Progress
Display an input field.
RadioGroup
Display a set of radio buttons.
Range
Display a range field
Select
Display a select field.
SelectMenu
Display an input field.
Skeleton
Display a placeholder while content is loading.
Slideover
Display a dialog that slides in from the edge of the screen.
Table
Display data in a table.
Tabs
A set of tab panels that are displayed one at a time.
Textarea
Display a textarea field.
Toggle
Display a toggle field.
Tooltip
Display content that appears on hover next to an element.
VerticalNavigation
Display a list of vertical links.