# Shark UI > Shark UI is a collection of beautifully-designed, accessible components and a code distribution platform. It is built with TypeScript, Tailwind CSS, and Ark UI primitives. It supports multiple frameworks including Next.js, Vite, Remix, Astro, and more. Open Source. Open Code. AI-Ready. It also comes with a command-line tool to install and manage components. - [The asChild prop](/docs/as-child): Pass a child element to make it inherit the styles and props. - [Introduction](/docs): Introduction to Shark UI - [January 2026 - First Beta](/docs/changelog/26-01-first-beta): Most of the components are ready for the first beta release. - [Changelog](/docs/changelog): All notable changes to shark-ui will be documented in this file. - [Accordion](/docs/components/accordion): A collapsible for displaying content. - [Alert Dialog](/docs/components/alert-dialog): A modal window that appears on top of the main content. To display important content to the user. - [Alert](/docs/components/alert): Displays a alert for user attention. - [Autocomplete](/docs/components/autocomplete): A searchable select input that allows users to filter and select from a list of options - [Avatar](/docs/components/avatar): An image element with a fallback for representing the user. - [Badge](/docs/components/badge): A badge or an element styled as a badge. - [Button Group](/docs/components/button-group): A component that allows you to group button elements together. - [Button](/docs/components/button): A button or an element styled as a button. - [Card](/docs/components/card): A flexible container for grouping related content and actions - [Carousel](/docs/components/carousel): An interactive slideshow for cycling through content. - [Chart](/docs/components/chart): A component for displaying charts. - [Checkbox](/docs/components/checkbox): A control element that allows for multiple selections within a set - [Clipboard](/docs/components/clipboard): A component to copy text to the clipboard. - [Collapsible](/docs/components/collapsible): A collapsible component for displaying content in a vertical stack. - [Combobox](/docs/components/combobox): A searchable select input that allows users to filter and select from a list of options - [Command](/docs/components/command): Searchable command input that allows users to filter and select from a list of options - [Context Menu](/docs/components/context-menu): A menu that appears when a user right-clicks on an element - [Date Picker](/docs/components/datepicker): A date picker component for selecting dates with calendar navigation - [Dialog](/docs/components/dialog): A modal window that appears on top of the main content. - [Editable](/docs/components/editable): A component that allows users to edit text in place. - [Field](/docs/components/field): Provides a flexible container for form inputs, labels, and helper text - [File Upload](/docs/components/file-upload): A component that allows users to upload files. - [Floating Panel](/docs/components/floating-panel): Used to display content in a non-modal floating window - [Hover Card](/docs/components/hover-card): A card that appears when a user hovers over an element. - [Components](/docs/components): A collection of components for your project. - [Input Group](/docs/components/input-group): A component that allows you to group input elements together. - [Input OTP](/docs/components/input-otp): For OTP or verification codes with auto-focus transfer, blur on complete, and masking options - [Input](/docs/components/input): A field that allows users to enter text - [Item](/docs/components/item): A versatile component that you can use to display any content. - [Kbd](/docs/components/kbd): A keyboard shortcut component - [Marquee](/docs/components/marquee): A component that displays a list of items in a scrolling container. - [Menu](/docs/components/menu): A list of options that appears when a user interacts with a button - [Native Select](/docs/components/native-select): A styled native HTML select element with consistent design system integration. - [Number Input](/docs/components/number-input): A number input component for entering numeric values - [Pagination](/docs/components/pagination): A component that allows users to navigate through a list of items. - [Popover](/docs/components/popover): An overlay that displays additional information or options when triggered. - [Progress](/docs/components/progress): Displays the status of a task that takes a long time. - [QR Code](/docs/components/qr-code): A component that displays a QR code - [Radio Group](/docs/components/radio-group): A set of checkable buttons where no more than one can be checked at a time - [Rating Group](/docs/components/rating-group): Allows users to rate items using a set of icons - [Scroll Area](/docs/components/scroll-area): A custom scrollable area component with styled scrollbars - [Select](/docs/components/select): Displays a list of options for the user to pick from - [Separator](/docs/components/separator): A separator is a component that separates content with a thin line. - [Sheet](/docs/components/sheet): A sheet is a component that displays content that slides out from the edge of the screen. - [Skeleton](/docs/components/skeleton): A skeleton is a component that displays a loading state. - [Slider](/docs/components/slider): A slider component for selecting a value from a range. - [Spinner](/docs/components/spinner): A spinner component for displaying a loading state - [Splitter](/docs/components/splitter): A splitter is a component that splits content into two or more panels. - [Steps](/docs/components/steps): A component that displays a list of steps in a wizard-like format. - [Switch](/docs/components/switch): A control element that allows for a binary selection - [Table](/docs/components/table): A component that displays data in a tabular format - [Tabs](/docs/components/tabs): Flexible navigation tool with various modes and features - [Textarea](/docs/components/textarea): Displays a form textarea or a component that looks like a textarea - [Toast](/docs/components/toast): A toast is a component that displays a message to the user. - [Toggle Group](/docs/components/toggle-group): A group of toggle buttons that can be used to select a value. - [Toggle](/docs/components/toggle): A two-state button that can be toggled on or off - [Tooltip](/docs/components/tooltip): A label that provides information on hover or focus. - [Tour](/docs/components/tour): A component that displays a tour of the application - [Tree View](/docs/components/tree-view): A component for displaying hierarchical data in a tree structure. - [Astro](/docs/installation/astro): Instructions to install Shark UI in an Astro project - [Installation](/docs/installation): This guide will help you install Shark UI in your project. - [Manual Installation](/docs/installation/manual): Instructions to install Shark UI in a project manually. - [Next.js](/docs/installation/next): Instructions to install Shark UI in a Next.js project - [React Router](/docs/installation/react-router): Instructions to install Shark UI in a React Router project - [TanStack Start](/docs/installation/tanstack-start): Instructions to install Shark UI in a TanStack Start project - [Vite](/docs/installation/vite): Instructions to install Shark UI in a Vite project