A showcase of all installed Untitled UI components (Free tier)
Button component with various colors and sizes
User avatar with various sizes and states
Status badges with various colors
Text input fields
We'll never share your email
Multi-line text input
Max 500 characters
Checkbox with labels
Toggle switches
Informational tooltips on hover
Dropdown menu with actions
Select dropdown with various options
Tabbed navigation with different styles
Button Brand Style
Button Gray Style
Underline Style
Button Border Style
Dialog modal overlay
Payment method icons for billing and checkout UIs
Import from @/components/shared/ui/foundations/payment-icons
@untitledui/icons library
Import icons from @untitledui/icons
How to import components
// Buttons
import { Button } from '@/components/shared/ui/base/buttons/button';
// Avatar
import { Avatar } from '@/components/shared/ui/base/avatar/avatar';
// Badge
import { Badge } from '@/components/shared/ui/base/badges/badges';
// Input & Textarea
import { InputBase } from '@/components/shared/ui/base/input/input';
import { TextArea } from '@/components/shared/ui/base/textarea/textarea';
// Checkbox & Toggle
import { Checkbox } from '@/components/shared/ui/base/checkbox/checkbox';
import { Toggle } from '@/components/shared/ui/base/toggle/toggle';
// Tooltip
import { Tooltip } from '@/components/shared/ui/base/tooltip/tooltip';
// Dropdown
import { Dropdown } from '@/components/shared/ui/base/dropdown/dropdown';
// Usage: <Dropdown.Root>, <Dropdown.Menu>, <Dropdown.Item>, etc.
// Select
import { Select } from '@/components/shared/ui/base/select/select';
// Usage: <Select items={[...]}>{(item) => <Select.Item {...item} />}</Select>
// Tabs
import { Tabs, TabList, Tab, TabPanel } from '@/components/shared/ui/application/tabs/tabs';
// Usage: <Tabs><TabList items={[...]}>{item => <Tab {...item} />}</TabList><TabPanel id="..." /></Tabs>
// Modal
import { DialogTrigger, ModalOverlay, Modal, Dialog } from '@/components/shared/ui/application/modals/modal';
// Icons
import { User01, Mail01, Settings01 } from '@untitledui/icons';
// Payment Icons
import { VisaIcon, MastercardIcon, AmexIcon, ... } from '@/components/shared/ui/foundations/payment-icons';