UI Thing

# 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

## API Endpoints

Documentation for all API endpoints

- [Get Components](/api/components): Retrieve a list of UI components. A search query parameter can be provided to filter components by name, value, or docsPath.
- [Get Component by Name](/api/components/{name}): Retrieve detailed information about a specific UI component by its name. The name parameter is required and should match the component's name or value. To get the list of available components, use the /api/components endpoint.
- [Get Prose](/api/prose): Retrieve a list of prose elements. A search query parameter can be provided to filter prose elements by name or value.
- [Get Prose by Name](/api/prose/{name}): Retrieve detailed information about a specific prose element by its name. The name parameter is required and should match the prose element's name or value. To get the list of available prose elements, use the /api/prose endpoint.
- [Get Blocks](/api/blocks): Retrieve a list of UI blocks. A search query parameter can be provided to filter blocks by name, fileName, category, or path.
- [Get Block by Name](/api/blocks/{name}): Retrieve detailed information about a specific UI block by its name. The name parameter is required and should match the block's name or fileName. To get the list of available blocks, use the /api/blocks endpoint.
- [Get Block Categories](/api/blocks/categories): Retrieve a list of unique block categories available in the system.
- [Get Blocks by Category](/api/blocks/categories/{name}): Retrieve a list of UI blocks that belong to a specific category. The name parameter is required and should match the desired block category. To get the list of available categories, use the /api/blocks/categories endpoint.

## Content

- [Introduction](https://uithing.com/raw/getting-started/introduction.md): A brief overview of UI Thing for Nuxt, its philosophy, and how it differs from traditional component libraries.
- [Setup](https://uithing.com/raw/getting-started/setup.md): Learn how to setup your Nuxt project with UI Thing.
- [CLI](https://uithing.com/raw/getting-started/cli.md): Learn how to use the cli that comes with this project.
- [Starters](https://uithing.com/raw/getting-started/starter.md): Quickly create a Nuxt project with one of the UI Thing starters below.
- [Shortcuts](https://uithing.com/raw/getting-started/shortcuts.md): Learn how to display and define keyboard shortcuts in your app.
- [MCP Server](https://uithing.com/raw/getting-started/mcp.md): Connect UI Thing to Codex, VS Code, and other MCP clients for scaffold-first access to components, blocks, prose, docs, and install plans.
- [Changelog](https://uithing.com/raw/getting-started/changelog.md): See what has changed recently in UI Thing.
- [Cards](https://uithing.com/raw/examples/cards.md): A set of different cards showing how you can use form elements in a real world application.
- [Dashboard](https://uithing.com/raw/examples/dashboard.md): A simple dashboard created with the components from the library. It shows how to use the components in a real application.
- [Landing Page](https://uithing.com/raw/examples/landing.md): A complete landing page example showcasing various UI Thing components including hero, features, testimonials, pricing, FAQ, and CTA sections.
- [Schema Visualizer](https://uithing.com/raw/examples/schema-visualizer.md): A schema visualizer created with Vue Flow. All credits go to the team over at Origin UI.
- [All Components](https://uithing.com/raw/components.md): Browse and search through all available UI Thing components. Find the perfect component for your next project.
- [Accordion](https://uithing.com/raw/components/accordion.md): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert](https://uithing.com/raw/components/alert.md): A visually emphasized message that informs the user of an event.
- [Alert Dialog](https://uithing.com/raw/components/alertdialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Animated Tooltip](https://uithing.com/raw/components/animatedtooltip.md): A group of animated tooltips that display on hover with smooth spring animations and dynamic positioning based on mouse movement.
- [Aspect Ratio](https://uithing.com/raw/components/aspectratio.md): Displays content within a desired ratio.
- [Autocomplete](https://uithing.com/raw/components/autocomplete.md): Choose from a list of suggested values with full keyboard support.
- [Avatar](https://uithing.com/raw/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://uithing.com/raw/components/badge.md): A badge is a component that is used to highlight an item's status for quick recognition.
- [Breadcrumbs](https://uithing.com/raw/components/breadcrumbs.md): Breadcrumbs are a great way to show hierarchy in a page.
- [Button](https://uithing.com/raw/components/button.md): A button is a component that is used to trigger an action.
- [Button Group](https://uithing.com/raw/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://uithing.com/raw/components/calendar.md): A calendar component allows you to display a calendar with events.
- [Card](https://uithing.com/raw/components/card.md): 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/raw/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Checkbox](https://uithing.com/raw/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Chip](https://uithing.com/raw/components/chip.md): A component used to display some sort of indicator on another component.
- [Collapsible](https://uithing.com/raw/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Color Picker](https://uithing.com/raw/components/color-picker.md): A fully-featured color picker component with support for multiple color formats, alpha channel, and preset swatches.
- [Combobox](https://uithing.com/raw/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [Command](https://uithing.com/raw/components/command.md): A command menu component composed of the Combobox primitives from Reka UI.
- [Container](https://uithing.com/raw/components/container.md): A container to wrap content in. It has a max-width and is centered by default.
- [Context Menu](https://uithing.com/raw/components/contextmenu.md): Displays a menu located at the pointer, triggered by a right-click or a long-press.
- [Currency Input](https://uithing.com/raw/components/currencyinput.md): Displays a form input field for currency values.
- [DataTable](https://uithing.com/raw/components/datatable.md): 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/raw/components/datefield.md): Enables users to input specific dates within a designated field.
- [Datepicker](https://uithing.com/raw/components/datepicker.md): Allows the user to select a date from a calendar.
- [Description List](https://uithing.com/raw/components/description-list.md): 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/raw/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Divider](https://uithing.com/raw/components/divider.md): A horizontal line to separate content. Similiar to the Seperator component, but with items in the middle.
- [Draggable](https://uithing.com/raw/components/draggable.md): A wrapper component around Vue Draggable that makes any list of items sortable via drag and drop.
- [Drawer](https://uithing.com/raw/components/drawer.md): A drawer component that can be used as a Dialog replacement on tablet and mobile devices.
- [Dropdown Menu](https://uithing.com/raw/components/dropdownmenu.md): Displays a menu to the user—such as a set of actions or functions—triggered by a button.
- [Dropfile](https://uithing.com/raw/components/dropfile.md): Allows users to drag and drop files into the browser to upload them.
- [Editable](https://uithing.com/raw/components/editable.md): 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/raw/components/empty.md): A component used to display a message when there is no data to show.
- [Fancy Icon](https://uithing.com/raw/components/fancyicon.md): An icon with a nice background color.
- [Field](https://uithing.com/raw/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Flip Clock](https://uithing.com/raw/components/flip-clock.md): Animated split-flap clock that supports live time and countdown modes.
- [Floating Dock](https://uithing.com/raw/components/floating-dock.md): A responsive floating dock with a magnified desktop hover state and an expandable mobile menu.
- [Form](https://uithing.com/raw/components/form.md): Building forms with VeeValidate and Zod.
- [Gradient Divider](https://uithing.com/raw/components/gradeint-divider.md): A divider that has a gradient background
- [Heading](https://uithing.com/raw/components/heading.md): Displays a semantic heading with multiple levels of size and style customization.
- [Hover Card](https://uithing.com/raw/components/hovercard.md): For sighted users to preview content available behind a link.
- [Icon](https://uithing.com/raw/components/icon.md): A versatile icon component that supports Iconify icons, emojis, and custom images with automatic detection.
- [Iframe (Lazy)](https://uithing.com/raw/components/iframelazy.md): A lazy-loaded iframe component that loads content only when it comes into view, with customizable placeholder and intersection options.
- [Input](https://uithing.com/raw/components/input.md): Displays a form input field or a component that looks like an input field.
- [Input Group](https://uithing.com/raw/components/input-group.md): Display additional information or actions to an input or textarea.
- [Item](https://uithing.com/raw/components/item.md): A versatile component that you can use to display any content.
- [Keyboard Key](https://uithing.com/raw/components/keyboardkey.md): 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/raw/components/label.md): Renders an accessible label associated with controls.
- [List](https://uithing.com/raw/components/list.md): 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/raw/components/listbox.md): A control that allows the user to toggle between checked and not checked from a list of options.
- [Loader](https://uithing.com/raw/components/loader.md): 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/raw/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Nav](https://uithing.com/raw/components/nav.md): A horizontal navigation bar for primary site links, branding, and interactive elements.
- [Navbar](https://uithing.com/raw/components/navbar.md): 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/raw/components/navigationmenu.md): A collection of links for navigating websites.
- [Number Field](https://uithing.com/raw/components/number-field.md): A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
- [Pagination](https://uithing.com/raw/components/pagination.md): Displays data in paged format and provides navigation between pages.
- [Pin Input](https://uithing.com/raw/components/pininput.md): A sequence of one-character alphanumeric inputs. Useful for PIN codes, verification codes, etc.
- [Placeholder](https://uithing.com/raw/components/placeholder.md): A placeholder box that can be used as any filler content.
- [Pointer Highlight](https://uithing.com/raw/components/pointer-highlight.md): Draw attention to any element with an animated rectangle and pointer reveal.
- [Popover](https://uithing.com/raw/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://uithing.com/raw/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [QR Code](https://uithing.com/raw/components/qrcode.md): A component for generating and displaying QR codes with customizable styling and frame handles.