# Nerdfishui > User-friendly UI components built with Tailwind CSS ## Docs - [Nerdfishui](https://ui.nerdfish.be/): Re-usable components built using Base UI Components and Tailwind CSS. - [Installation](https://ui.nerdfish.be/installation): A custom component library built with React and TailwindCSS to help streamline proof of concept development and provide visually pleasing and functional components. - [Layout](https://ui.nerdfish.be/layout): Nerdfish UI layouting - [Colors](https://ui.nerdfish.be/colors): Color tokens used across the design system. - [Spacing](https://ui.nerdfish.be/spacing): Semantic spacing scale. - [Radius](https://ui.nerdfish.be/radius): Border radius tokens. - [Typography](https://ui.nerdfish.be/typography): Typography used in the NerdfishUI library - [Duration](https://ui.nerdfish.be/duration): Motion duration tokens. - [Easing](https://ui.nerdfish.be/easing): Motion easing tokens. ## Components ### Layout - [Aspect Ratio](https://ui.nerdfish.be/components/aspect-ratio): An image element with a fallback for representing the user. - [Card](https://ui.nerdfish.be/components/card): Displays a card with header, content, and footer. - [Empty](https://ui.nerdfish.be/components/empty): Empty is a component that can be used to display a message there is no data to display. - [Item](https://ui.nerdfish.be/components/item): A versatile component that you can use to display any content. - [Separator](https://ui.nerdfish.be/components/separator): Visually or semantically separates content. - [Tabs](https://ui.nerdfish.be/components/tabs): A set of layered sections of content—known as tab panels—that are displayed one at a time. - [Marquee](https://ui.nerdfish.be/components/marquee): A horizontal scrolling component. ### Chat - [Attachment](https://ui.nerdfish.be/components/attachment): Display file and image attachments with media, metadata, upload states, and actions. - [Bubble](https://ui.nerdfish.be/components/bubble): Render the visible message surface inside a Message row with variants for sender, receiver, and status treatments. - [Marker](https://ui.nerdfish.be/components/marker): Inline status, separators, and timeline markers for chat transcripts. - [Message](https://ui.nerdfish.be/components/message): Lay out a single message in a conversation with avatar, alignment, header, and footer slots. ### Input - [Checkbox](https://ui.nerdfish.be/components/checkbox): A control that allows the user to toggle between checked and not checked. - [Combobox](https://ui.nerdfish.be/components/combobox): An input combined with a list of predefined items to select. - [DatePicker](https://ui.nerdfish.be/components/date-picker): A date picker component. - [Field](https://ui.nerdfish.be/components/field): Combine labels, controls, and help text to compose accessible form fields and grouped inputs. - [Avatar](https://ui.nerdfish.be/components/filters): A comprehensive filtering system with multiple filter types, operators, and visual indicators for data organization. - [Input](https://ui.nerdfish.be/components/input): Input is a component that can be used to input a text. - [InputGroup](https://ui.nerdfish.be/components/input-group): Display additional information or actions to an input or textarea. - [InputOTP](https://ui.nerdfish.be/components/input-otp): Accessible one-time password component with copy paste functionality. - [Label](https://ui.nerdfish.be/components/label): Renders an accessible label associated with controls. - [NumbeInput](https://ui.nerdfish.be/components/number-input): A number input component with increment/decrement controls and validation. Built on top of Base UI Number Field component. - [Phone Input](https://ui.nerdfish.be/components/phone-input): A phone input component with country code selection. - [RadioGroup](https://ui.nerdfish.be/components/radio-group): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. - [Select](https://ui.nerdfish.be/components/select): Displays a list of options for the user to pick from—triggered by a button. - [Slider](https://ui.nerdfish.be/components/slider): An input where the user selects a value from within a given range. - [Switch](https://ui.nerdfish.be/components/switch): A control that allows the user to toggle between checked and not checked. - [Toggle](https://ui.nerdfish.be/components/toggle): A two-state button that can be either on or off. - [Toggle Group](https://ui.nerdfish.be/components/toggle-group): A group of toggle buttons. - [Textarea](https://ui.nerdfish.be/components/textarea): Textarea is a component that can be used to input a text. ### Navigation and actionables - [Button](https://ui.nerdfish.be/components/button): Buttons are used to trigger actions. - [Breadcrumb](https://ui.nerdfish.be/components/breadcrumb): Displays the path to the current resource using a hierarchy of links. - [Collapsible](https://ui.nerdfish.be/components/collapsible): An interactive component which expands/collapses a panel. - [ContextMenu](https://ui.nerdfish.be/components/context-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button. - [Command](https://ui.nerdfish.be/components/command): Fast, composable, unstyled command menu for React. - [DropdownMenu](https://ui.nerdfish.be/components/dropdown-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button. - [NavigationMenu](https://ui.nerdfish.be/components/navigation-menu): A collection of links for navigating websites. - [Pagination](https://ui.nerdfish.be/components/pagination): Pagination with page navigation, next and previous links. - [Sidebar](https://ui.nerdfish.be/components/sidebar): A composable, themeable and customizable sidebar component. ### Data Display - [Accordion](https://ui.nerdfish.be/components/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content. - [Alert](https://ui.nerdfish.be/components/alert): Displays a callout for user attention. - [AlertDialog](https://ui.nerdfish.be/components/alert-dialog): A dialog that requires user response to proceed. - [Avatar](https://ui.nerdfish.be/components/avatar): An image element with a fallback for representing the user. - [Badge](https://ui.nerdfish.be/components/badge): Displays a badge or a component that looks like a badge. - [Calendar](https://ui.nerdfish.be/components/calendar): A date field component that allows users to enter and edit date. - [Chart](https://ui.nerdfish.be/components/chart): Beautiful charts. Built using Recharts. - [Code Block](https://ui.nerdfish.be/components/code-block): Displays syntax-highlighted code with an optional header for language, title, and actions. - [Dialog](https://ui.nerdfish.be/components/dialog): A popup that opens on top of the entire page. - [Drawer](https://ui.nerdfish.be/components/drawer): A drawer component for React. - [Kbd](https://ui.nerdfish.be/components/kbd): Used to display textual user input from keyboard. - [Popover](https://ui.nerdfish.be/components/popover): Displays rich content in a portal, triggered by a button. - [Progress](https://ui.nerdfish.be/components/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. - [Sheet](https://ui.nerdfish.be/components/sheet): Extends the Dialog component to display content that complements the main content of the screen. - [Spinner](https://ui.nerdfish.be/components/spinner): An indicator that can be used to show a loading state. - [Toast](https://ui.nerdfish.be/components/toast): An opinionated toast component for React. - [Tooltip](https://ui.nerdfish.be/components/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. ### Utility - [ScrollArea](https://ui.nerdfish.be/components/scroll-area): Augments native scroll functionality for custom, cross-browser styling. - [Skeleton](https://ui.nerdfish.be/components/skeleton): Skeleton is a placeholder to show a loading state and the expected shape of a component. ### Forms - [React Hook Form Example](https://ui.nerdfish.be/components/forms/react-hook-form): Build forms in React using React Hook Form and Zod. ## Blocks - [Blocks](https://ui.nerdfish.be/blocks): Common component patterns - [Skeleton Cards](https://ui.nerdfish.be/blocks/skeleton-cards): Common skeleton card patterns - [Skeleton Content](https://ui.nerdfish.be/blocks/skeleton-content): Common skeleton content patterns ## Agent resources - [llms-full.txt](https://ui.nerdfish.be/llms-full.txt): The full Markdown of every page in one file. - [Page Markdown](https://ui.nerdfish.be/index.md): Append `.md` to any page URL to fetch that page as raw Markdown. - [JSON API](https://ui.nerdfish.be/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://ui.nerdfish.be/openapi.json. - [API catalog](https://ui.nerdfish.be/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here. - [agent-readability.json](https://ui.nerdfish.be/agent-readability.json): Manifest of every agent-facing artifact on this site. - [Sitemap](https://ui.nerdfish.be/sitemap.xml): Every indexable page URL with its last-modified date.