pitsi/ui
HomeDocsComponentsAnimationsBlocksTemplates
1
1
Sections
  • Get Started
  • Components
  • Animations
  • MCP Server
  • Forms
  • Changelog
Get Started
  • Installation
  • CLI
  • llms.txt
Components
  • Accordion
  • Alert Dialog
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button Group
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Container
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Flex
  • Form
  • Grid
  • Hover Card
  • Input Group
  • Input OTP
  • Input
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Responsive
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spacer
  • Spinner
  • Squircle
  • Switch
  • Table
  • Tabs
  • Textarea
  • Theme Toggle
  • Toggle Group
  • Toggle
  • Tooltip
  • Typography
  • Unicorn Wrapper
Animations
  • Background Image Parallax
  • Blend Mode Cursor
  • Card Swipe Carousel
  • Cards Parallax
  • Cursor Hover Mask
  • Floating Image Gallery
  • Mouse Hover Gallery
  • Nav Menu
  • Parallax Scroll
  • Perspective Carousel
  • Perspective Section Transition
  • Scroll Expand
  • Scroll Fade
  • Scroll Scale
  • Slide Down
  • Slide Up
  • Smooth Parallax Scroll
  • Smooth Scroll
  • Sticky Footer
  • Text Along Path
  • Text Gradient Opacity
  • Text Parallax
  • Transforms 3d
  • Zoom Parallax
General

Resources, guides, and helpful links.

Documentation
Introduction
Installation
CLI
llms.txt
Next.js
Vite
Laravel
React Router
Pages
Home
Docs
Components
Animations
Blocks
Templates
Templates
Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Connect
GitHub
Twitter
Get Started
Changelog
Legal
Privacy
Terms
Blocks

Larger composed sections for building pages.

Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Category Filter
Comment List
Incentives
Order Confirmation
Order History
Order Summaries
Order Tracking
Product List
Product Overview
Product Review
Refund Form
Refund Overview
Refund Status
Shopping Cart
404 Page
About Us Page
Blog Details
Career Pages
Coming Soon Page
Contactus Page
Legal Pages
Login Page
Maintenance Page
Otp
Pricing Page
About Us Section
Blogs News
Clients
Contact Form
Cta
Faq
Features
Footer
Gallery
Hero Section
How It Works
Integration
Portfolio
Pricing Plans
Stats
Team
Testimonial
Components

Copy and paste UI components into your apps.

Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Container
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Flex
Form
Grid
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Responsive
Scroll Area
Segmented Control
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spacer
Spinner
Squircle
Switch
Table
Tabs
Textarea
Theme Toggle
Toggle Group
Toggle
Tooltip
Typography
Unicorn Wrapper
Animations

Beautiful animations and effects for your UI.

Background Image Parallax
Blend Mode Cursor
Card Swipe Carousel
Cards Parallax
Cursor Hover Mask
Floating Image Gallery
Mouse Hover Gallery
Nav Menu
Parallax Scroll
Perspective Carousel
Perspective Section Transition
Scroll Expand
Scroll Fade
Scroll Scale
Slide Down
Slide Up
Smooth Parallax Scroll
Smooth Scroll
Sticky Footer
Text Along Path
Text Gradient Opacity
Text Parallax
Transforms 3d
Zoom Parallax
Sign In

Components

PreviousNext

Here you can find all the components available in the library. We are working on adding more components.

Overview

Browse our collection of beautifully designed, accessible components. Each component is built with React, TypeScript, and Tailwind CSS. Copy and paste the code into your project and customize as needed.

Core components

Core UI components built on top of Radix UI primitives. Fully accessible and customizable.

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Alert

Displays a callout for user attention.

Aspect Ratio

Displays content within a desired ratio.

Avatar

An image element with a fallback for representing the user.

Badge

Displays a badge or a component that looks like a badge.

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Button Group

A container that groups related buttons together with consistent styling.

Button

Displays a button or a component that looks like a button.

Calendar

A date field component that allows users to enter and edit date.

Card

Displays a card with header, content, and footer.

Carousel

A carousel with motion and swipe built using Embla.

Checkbox

A control that allows the user to toggle between checked and not checked.

Collapsible

An interactive component which expands/collapses a panel.

Command

Fast, composable, unstyled command menu for React.

Context Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Drawer

A drawer component for React.

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Empty

Use the Empty component to display an empty state.

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Hover Card

For sighted users to preview content available behind a link.

Input Group

Display additional information or actions to an input or textarea.

Input OTP

Accessible one-time password component with copy paste functionality.

Input

Displays a form input field or a component that looks like an input field.

Item

A versatile component that you can use to display any content.

Kbd

Used to display textual user input from keyboard.

Label

Renders an accessible label associated with controls.

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Native Select

A styled native HTML select element with consistent design system integration.

Navigation Menu

A collection of links for navigating websites.

Pagination

Pagination with page navigation, next and previous links.

Popover

Displays rich content in a portal, triggered by a button.

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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.

Resizable

Accessible resizable panel groups and layouts with keyboard support.

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Select

Displays a list of options for the user to pick from—triggered by a button.

Separator

Visually or semantically separates content.

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Sidebar

A composable, themeable and customizable sidebar component.

Skeleton

Use to show a placeholder while content is loading.

Slider

An input where the user selects a value from within a given range.

Sonner

An opinionated toast component for React.

Spinner

An indicator that can be used to show a loading state.

Switch

A control that allows the user to toggle between checked and not checked.

Table

A responsive table component.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Textarea

Displays a form textarea or a component that looks like a textarea.

Toggle Group

A set of two-state buttons that can be toggled on or off.

Toggle

A two-state button that can be either on or off.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Typography

A flexible typography component with variant-based styling powered by CSS custom properties.

llms.txtAccordion

On This Page

OverviewCore componentsAccordionAlert DialogAlertAspect RatioAvatarBadgeBreadcrumbButton GroupButtonCalendarCardCarouselCheckboxCollapsibleCommandContext MenuDialogDrawerDropdown MenuEmptyFieldHover CardInput GroupInput OTPInputItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToggle GroupToggleTooltipTypographyPrimitivesContainerFlexGridSegmented ControlSpacerTheme ToggleSectorialSquircleUnicorn Wrapper

Primitives

Low-level building blocks for creating custom UI components.

Container

A layout component with gutter and padding management for responsive content centering.

Flex

A flexbox layout component with variant-based styling and responsive props.

Grid

A CSS Grid layout component with responsive configuration and variant-based styling.

Segmented Control

A tab-based segmented control component with animated transitions built on Radix UI Tabs.

Spacer

A component for adding consistent spacing between elements with size variants.

Theme Toggle

A compact toggle component for switching between light, dark, and system themes.

Sectorial

Specialized components designed for specific use cases and industries.

Squircle

An SVG filter component for creating squircle (superellipse) shapes using CSS filters.

Unicorn Wrapper

A wrapper component for Unicorn Studio projects with optimized performance and error handling.