# UI Thing | TailwindCSS Component Library for Nuxt

> UI Thing is a flexible and modern component library for Nuxt, offering reusable UI components styled with TailwindCSS and inspired by shadcn/ui. Simplify your development process with easy-to-integrate components and a powerful CLI tool.

## Documentation Sets

- [Complete Documentation for UI Thing](https://uithing.com/llms-full.txt): The complete documentation including all content

## Content

- [Introduction](https://uithing.com/getting-started/introduction): A brief overview of UI Thing for Nuxt, its philosophy, and how it differs from traditional component libraries.
- [Setup](https://uithing.com/getting-started/setup): Learn how to setup your Nuxt project with UI Thing.
- [CLI](https://uithing.com/getting-started/cli): Learn how to use the cli that comes with this project.
- [Starters](https://uithing.com/getting-started/starter): Quickly create a Nuxt project with one of the UI Thing starters below.
- [Shortcuts](https://uithing.com/getting-started/shortcuts): Learn how to display and define keyboard shortcuts in your app.
- [Changelog](https://uithing.com/getting-started/changelog): See what has changed recently in UI Thing.
- [Cards](https://uithing.com/examples/cards): A set of different cards showing how you can use form elements in a real world application.
- [Dashboard](https://uithing.com/examples/dashboard): A simple dashboard created with the components from the library. It shows how to use the components in a real application.
- [Schema Visualizer](https://uithing.com/examples/schema-visualizer): A schema visualizer created with Vue Flow. All credits go to the team over at Origin UI.
- [Accordion](https://uithing.com/components/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert](https://uithing.com/components/alert): A visually emphasized message that informs the user of an event.
- [Alert Dialog](https://uithing.com/components/alertdialog): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://uithing.com/components/aspectratio): Displays content within a desired ratio.
- [Autocomplete](https://uithing.com/components/autocomplete): Choose from a list of suggested values with full keyboard support.
- [Avatar](https://uithing.com/components/avatar): An image element with a fallback for representing the user.
- [Badge](https://uithing.com/components/badge): A badge is a component that is used to highlight an item's status for quick recognition.
- [Breadcrumbs](https://uithing.com/components/breadcrumbs): Breadcrumbs are a great way to show hierarchy in a page.
- [Button](https://uithing.com/components/button): A button is a component that is used to trigger an action.
- [Button Group](https://uithing.com/components/button-group): A container that groups related buttons together with consistent styling.
- [Calendar](https://uithing.com/components/calendar): A calendar component allows you to display a calendar with events.
- [Card](https://uithing.com/components/card): A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
- [Carousel](https://uithing.com/components/carousel): A carousel with motion and swipe built using Embla.
- [Checkbox](https://uithing.com/components/checkbox): A control that allows the user to toggle between checked and not checked.
- [Chip](https://uithing.com/components/chip): A component used to display some sort of indicator on another component.
- [Collapsible](https://uithing.com/components/collapsible): An interactive component which expands/collapses a panel.
- [Combobox](https://uithing.com/components/combobox): Autocomplete input and command palette with a list of suggestions.
- [Command](https://uithing.com/components/command): A command menu component composed of the Combobox primitives from Reka UI.
- [Container](https://uithing.com/components/container): A container to wrap content in. It has a max-width and is centered by default.
- [Context Menu](https://uithing.com/components/contextmenu): Displays a menu located at the pointer, triggered by a right-click or a long-press.
- [Currency Input](https://uithing.com/components/currencyinput): Displays a form input field for currency values.
- [DataTable](https://uithing.com/components/datatable): DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
- [Date Field](https://uithing.com/components/datefield): Enables users to input specific dates within a designated field.
- [Datepicker](https://uithing.com/components/datepicker): Allows the user to select a date from a calendar.
- [Description List](https://uithing.com/components/description-list): A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.
- [Dialog](https://uithing.com/components/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Divider](https://uithing.com/components/divider): A horizontal line to separate content. Similiar to the Seperator component, but with items in the middle.
- [Draggable](https://uithing.com/components/draggable): A wrapper component around Vue Draggable that makes any list of items sortable via drag and drop.
- [Drawer](https://uithing.com/components/drawer): A drawer component that can be used as a Dialog replacement on tablet and mobile devices.
- [Dropdown Menu](https://uithing.com/components/dropdownmenu): Displays a menu to the user—such as a set of actions or functions—triggered by a button.
- [Dropfile](https://uithing.com/components/dropfile): Allows users to drag and drop files into the browser to upload them.
- [Editable](https://uithing.com/components/editable): Displays an input field used for editing a single line of text, rendering as static text on load. It transforms into a text input field when the edit interaction is triggered.
- [Empty](https://uithing.com/components/empty): A component used to display a message when there is no data to show.
- [Fancy Icon](https://uithing.com/components/fancyicon): An icon with a nice background color.
- [Field](https://uithing.com/components/field): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Form](https://uithing.com/components/form): Building forms with VeeValidate and Zod.
- [Gradient Divider](https://uithing.com/components/gradeint-divider): A divider that has a gradient background
- [Heading](https://uithing.com/components/heading): Displays a semantic heading with multiple levels of size and style customization.
- [Hover Card](https://uithing.com/components/hovercard): For sighted users to preview content available behind a link.
- [Input](https://uithing.com/components/input): Displays a form input field or a component that looks like an input field.
- [Input Group](https://uithing.com/components/input-group): Display additional information or actions to an input or textarea.
- [Item](https://uithing.com/components/item): A versatile component that you can use to display any content.
- [Keyboard Key](https://uithing.com/components/keyboardkey): The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
- [Label](https://uithing.com/components/label): Renders an accessible label associated with controls.
- [List](https://uithing.com/components/list): Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read.
- [Listbox](https://uithing.com/components/listbox): A control that allows the user to toggle between checked and not checked from a list of options.
- [Loader](https://uithing.com/components/loader): A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.
- [Menubar](https://uithing.com/components/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Nav](https://uithing.com/components/nav): A horizontal navigation bar for primary site links, branding, and interactive elements.
- [Navbar](https://uithing.com/components/navbar): A navbar to use in your app. It is rendered as a header element by default but can be changed to a div with the as props.
- [Navigation Menu](https://uithing.com/components/navigationmenu): A collection of links for navigating websites.
- [Number Field](https://uithing.com/components/number-field): A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
- [Pagination](https://uithing.com/components/pagination): Displays data in paged format and provides navigation between pages.
- [Pin Input](https://uithing.com/components/pininput): A sequence of one-character alphanumeric inputs. Useful for PIN codes, verification codes, etc.
- [Placeholder](https://uithing.com/components/placeholder): A placeholder box that can be used as any filler content.
- [Popover](https://uithing.com/components/popover): Displays rich content in a portal, triggered by a button.
- [Progress](https://uithing.com/components/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Radio Group](https://uithing.com/components/radiogroup): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Rating](https://uithing.com/components/rating): A component for displaying and selecting star ratings.
- [Scroll Area](https://uithing.com/components/scrollarea): Augments native scroll functionality for custom, cross-browser styling.
- [Scrollspy](https://uithing.com/components/scrollspy): A component for tracking scroll position and updating active links.
- [Select](https://uithing.com/components/select): Displays a list of options for the user to pick from—triggered by a button.
- [Select - Native](https://uithing.com/components/select-native): Display a dropdown list of options for users to choose from.
- [Separator](https://uithing.com/components/separator): Visually or semantically separates content.
- [Sheet](https://uithing.com/components/sheet): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://uithing.com/components/sidebar): A composable, themeable and customizable sidebar component.
- [Skeleton](https://uithing.com/components/skeleton): Use to show a placeholder while content is loading.
- [Slider](https://uithing.com/components/slider): An input where the user selects a value from within a given range.
- [Sonner](https://uithing.com/components/sonner): Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
- [Splitter](https://uithing.com/components/splitter): A component that divides your layout into resizable sections.
- [Stepper](https://uithing.com/components/stepper): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](https://uithing.com/components/switch): A control that allows the user to toggle between checked and not checked.
- [Table](https://uithing.com/components/table): A responsive table component.
- [Tabs](https://uithing.com/components/tabs): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Tags Input](https://uithing.com/components/tagsinput): Tag inputs render tags inside an input, followed by an actual text input.
- [Tanstack Table](https://uithing.com/components/tanstacktable): A powerful datatable for your app built with TanStack Table.
- [Textarea](https://uithing.com/components/textarea): Displays a form textarea or a component that looks like a textarea.
- [Timeline](https://uithing.com/components/timeline): A timeline component to display a series of events in chronological order.
- [Toggle](https://uithing.com/components/toggle): A two-state button that can be either on or off.
- [Toggle Group](https://uithing.com/components/togglegroup): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://uithing.com/components/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Tree](https://uithing.com/components/tree): A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
- [Border Beam](https://uithing.com/goodies/border-beam): An animated beam of light which travels along the border of its container.
- [Confetti](https://uithing.com/goodies/confetti): Display some confetti effect in your nuxt app.
- [File Upload](https://uithing.com/goodies/file-upload): Components used to allow users to upload files to your application.
- [Full Calendar](https://uithing.com/goodies/full-calendar): Display a full calendar in your nuxt app.
- [Gooey Menu](https://uithing.com/goodies/gooey-menu): Display a gooey menu that expands to display a list of items.
- [Meteors](https://uithing.com/goodies/meteors): Shower your UI with meteors.... For whatever reason you want to do that.
- [Neon Gradient Card](https://uithing.com/goodies/neon-gradient-card): A beautiful neon card effect
- [Quill](https://uithing.com/goodies/quill): Allow users to create rich text content with the Quill editor.
- [Retro Grid](https://uithing.com/goodies/retro-grid): Display an animated scrolling grid of retro squares.
- [Terminal](https://uithing.com/goodies/terminal): An implementation of the MacOS terminal. Useful for showcasing a command line interface.
- [Tiptap](https://uithing.com/goodies/tip-tap): Tiptap is an open source headless content editor and real-time collaboration framework to craft exactly the content experience you’d like to have – built for developers.
- [Vue Tippy](https://uithing.com/goodies/vue-tippy): VueTippy is a Vue 3 wrapper for the Tippy.js library, which allows you to use the tooltips as a Vue component and as a directive.
- [V-Wave](https://uithing.com/goodies/vwave): The material-ripple directive for Vue that actually works!
- [Forms Introduction](https://uithing.com/forms): Check out the form elements that are created with the help of Vee-Validate to easily add validation to your Nuxt app.
- [Form Builder](https://uithing.com/forms/form-builder): Quickly create a form from an array of objects.
- [VeeVueFormSlider](https://uithing.com/forms/vee-vueformslider): Displays a slider for the user to pick a value from.
- [VeeCheckbox](https://uithing.com/forms/veecheckbox): A checkbox component that uses the composition API provided by Vee-Validate to perform validation.
- [Checkbox - Native](https://uithing.com/forms/veecheckbox-native): The native checkbox allows you to do regular checkbox stuff like binding to an array of values.
- [VeeCurrencyInput](https://uithing.com/forms/veecurrencyinput): A currency input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeDateField](https://uithing.com/forms/veedatefield): A Date Field component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeDatepicker](https://uithing.com/forms/veedatepicker): An input component that allows the user to select a date.
- [VeeFileInput](https://uithing.com/forms/veefileinput): An input component that allows the user to upload files to your application.
- [VeeInput](https://uithing.com/forms/veeinput): An input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeMultiSelect](https://uithing.com/forms/veemultiselect): Displays a list of options for the user to pick from.
- [VeeNumberField](https://uithing.com/forms/veenumberfield): An number field component that uses the composition API provided by Vee-Validate to perform validation.
- [VeePinInput](https://uithing.com/forms/veepininput): A Pin Input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeRadioGroup](https://uithing.com/forms/veeradiogroup): Radio group component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeSelect](https://uithing.com/forms/veeselect): A select component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeTagsInput](https://uithing.com/forms/veetagsinput): An tags input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeTextarea](https://uithing.com/forms/veetextarea): An textarea component that uses the composition API provided by Vee-Validate to perform validation.
- [ApexCharts](https://uithing.com/apex-charts): A modern charting library that helps developers to create beautiful and interactive visualizations for web pages
- [Area](https://uithing.com/apex-charts/area): Area charts are used to represent quantitative data visually, showing the magnitude of change over time.
- [Bar](https://uithing.com/apex-charts/bar): Bar charts are used to compare different categories of data.
- [Candlestick](https://uithing.com/apex-charts/candle-stick): Candlestick charts are used to display the high, low, open, and close values of a financial instrument over time.
- [Funnel](https://uithing.com/apex-charts/funnel): Funnel charts are ideal for visualizing progressive stages in a linear process—typically where there's drop-off at each stage. They're perfect for showing conversion or attrition.
- [Heatmap](https://uithing.com/apex-charts/heatmap): Heatmaps are used to visualize data through variations in color, making it easy to see patterns and correlations in large datasets.
- [Line](https://uithing.com/apex-charts/line): Line charts are used to display data points over a continuous time period, showing trends and changes.
- [Pie / Donut](https://uithing.com/apex-charts/pie-donut): Pie and Donut charts are used to represent data in a circular format, showing the proportion of each category relative to the whole.
- [Polar Area](https://uithing.com/apex-charts/polar-area): Polar area charts are used to display multivariate data in a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
- [Radar](https://uithing.com/apex-charts/radar): Radar charts are used to display multivariate data in a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
- [Radial](https://uithing.com/apex-charts/radial): Radial charts are used to display multivariate data in a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
- [Slope](https://uithing.com/apex-charts/slope): Slope charts are used to compare two or more data points across different categories, showing the change in value over time or between two variables.
- [Treemaps](https://uithing.com/apex-charts/treemaps): Treemaps are used to visualize hierarchical data using nested rectangles, where the size and color of each rectangle represent different attributes of the data.
- [About](https://uithing.com/blocks/about): On this page you will find different ways to create compelling About Us sections for your website.
- [App - Empty State](https://uithing.com/blocks/app-empty-state): On this page you will ways to style the empty state in your application.
- [App - Header](https://uithing.com/blocks/app-header): Header blocks for dashboard pages showcasing different layouts and information hierarchies for admin interfaces.
- [App - Sidebar](https://uithing.com/blocks/app-sidebar): Sidebar navigation blocks for application dashboards with various layouts and interaction patterns.
- [App - Stats](https://uithing.com/blocks/app-stats): On this page you will ways to style the stat cards in your app.
- [Banner](https://uithing.com/blocks/banner): Eye-catching banner components for announcements, promotions, and important messages with smooth animations.
- [Blog - Page](https://uithing.com/blocks/blogpage): Complete blog page layouts with animated headers, featured posts, and responsive article grids for showcasing content collections.
- [Blog - Card](https://uithing.com/blocks/blogpostcard): Beautifully animated blog post card components with various layouts and hover effects for showcasing articles.
- [Blog - Section](https://uithing.com/blocks/blogsection): Beautifully designed blog section components with various layouts and animation styles for showcasing content collections.
- [Blog - Subscribe](https://uithing.com/blocks/blogsubscribe): Beautiful newsletter subscription cards for blogs with smooth animations and engaging designs.
- [Career](https://uithing.com/blocks/career): Professional career section components with job listings, department filtering, and elegant animations for recruitment pages.
- [Contact - Header](https://uithing.com/blocks/contactheader): Professional contact page sections with forms, maps, team info, and FAQ components. Features animated entrances, support team displays, location showcases, and department-based routing for effective customer communication.
- [Call To Action (CTA)](https://uithing.com/blocks/cta): Compelling call-to-action sections with animated entrances, testimonials, and conversion-focused designs. Features newsletter signups, app downloads, feature showcases, and testimonial carousels to drive user engagement.
- [Error](https://uithing.com/blocks/error): On this page you will find different ways in which you can styles your Error page.
- [FAQs](https://uithing.com/blocks/faq): Comprehensive FAQ section components with multiple layouts including grids, accordions, cards, and search functionality for help centers and support pages.
- [Features](https://uithing.com/blocks/features): Comprehensive feature section components with multiple layouts, animations, and styles. Features can also be used as service sections for showcasing offerings, capabilities, and benefits.
- [Footer](https://uithing.com/blocks/footer): Footer components for websites with various layouts and styles. From simple single-line footers to comprehensive multi-section layouts with navigation, social links, and newsletter subscriptions.
- [Forgot & Reset Password](https://uithing.com/blocks/forgot-reset-password): Password recovery and reset components including email input, success confirmation, password reset, OTP verification, and two-step authentication. Features centered layouts, card designs, split-screen layouts, and clear user feedback.
- [Header Section](https://uithing.com/blocks/headersection): Page header and hero section components featuring headlines, titles, descriptions, and call-to-action elements. Includes centered and left-aligned layouts with various interactive elements like buttons, tabs, email inputs, and search fields.
- [Hero](https://uithing.com/blocks/hero): Hero section components for landing pages featuring headlines, CTAs, images, videos, and form inputs. Includes split layouts, centered designs, background patterns, and smooth animations using Motion-v.
- [Login](https://uithing.com/blocks/login): Professional login page examples with various layouts and authentication options. Features simple forms, social logins, card designs, split layouts, and more.
- [Metric](https://uithing.com/blocks/metric): Showcase your key statistics and metrics with professional layouts. Features various grid patterns, card designs, icon integrations, and visual styles to highlight important numbers.
- [Navigation (Header)](https://uithing.com/blocks/navigation): Professional navigation header examples with responsive layouts, mega menus, and mobile support. Features dropdown menus, categorized links, blog showcases, and sheet-based mobile navigation.
- [Newsletter](https://uithing.com/blocks/newsletter): Newsletter subscription blocks featuring email signup forms, privacy notices, and promotional content. Includes split layouts, centered designs, card variations, and form fields with Motion-v animations.
- [Pricing](https://uithing.com/blocks/pricing): Professional pricing section examples with various layouts and feature comparisons. Includes card designs, billing toggles, feature tables, and popular plan highlights.
- [Sidebar](https://uithing.com/blocks/sidebar): Comprehensive sidebar navigation examples ported from shadcn-ui. Features collapsible sections, submenus, dropdowns, file trees, calendars, and various layout options for application interfaces.
- [Sign Up](https://uithing.com/blocks/signup): Professional sign up page examples with various layouts and features. Includes password strength meters, social authentication, split layouts, and background patterns.
- [Social Proof](https://uithing.com/blocks/socialproof): Social proof and testimonial components featuring company logos, customer reviews, ratings, and trust indicators. Includes animated logo grids, testimonial cards, statistics, and scrolling marquees using Motion-v animations.
- [Team](https://uithing.com/blocks/team): Team member showcase components featuring avatars, bios, roles, and social links. Includes grid layouts, card designs, department sections, and statistics with Motion-v animations.
- [Testimony](https://uithing.com/blocks/testimony): Customer testimonial section examples with various layouts. Features carousel sliders, grid layouts, company logos, ratings, and customer quotes to build trust and credibility.
- [Tiptap Editor](https://uithing.com/blocks/tiptap): Rich text editor blocks built with Tiptap featuring formatting toolbars, content editing, and grouped icon buttons. Perfect for blog posts, comments, documentation, and any content creation needs.
- [Callout](https://uithing.com/prose/callout): Display important information with icons and variants for different message types.
- [Card](https://uithing.com/prose/card): Display content in elegant cards with animated border beam effects, perfect for features, navigation, and content highlights.
- [Code Collapse](https://uithing.com/prose/code-collapse): A collapsible code block wrapper, perfect for showing long code examples without overwhelming your documentation.
- [Code Group](https://uithing.com/prose/code-group): Display multiple code snippets in a tabbed interface with automatic language detection, custom icons, and sync support across groups.
- [Code Snippet](https://uithing.com/prose/code-snippet): Dynamically import and display code from your project files or external URLs without duplicating content in your documentation.
- [Code Tree](https://uithing.com/prose/code-tree): Display a hierarchical file structure with expandable folders and file preview, perfect for showcasing project structures and code organization.
- [Collapsible](https://uithing.com/prose/collapsible): Hide and reveal content with a collapsible component featuring customizable icons and labels.
- [Field & Field Group](https://uithing.com/prose/field): Display component props or configuration options in a beautiful, readable format instead of traditional tables.
- [Icon List](https://uithing.com/prose/icon-list): Display lists with custom icons and variants for each item.
- [Images](https://uithing.com/prose/images): How to use images in your content with zoom and styling options.
- [Mermaid Diagrams](https://uithing.com/prose/mermaid): Render interactive diagrams and flowcharts using Mermaid syntax with automatic theme detection and lazy loading.
- [Package Manager](https://uithing.com/prose/package-manager): Display commands for multiple package managers with automatic syncing and switching.
- [Steps](https://uithing.com/prose/steps): Display numbered sequential steps with auto-incrementing counters, perfect for tutorials, installation guides, and multi-step processes.
- [Tabs](https://uithing.com/prose/tabs): The Tabs component from the Prose collection allows you to create tabbed interfaces in your content.
- [Typography](https://uithing.com/prose/typography): Explore the various typography styles and components available in the design system.