svg]:size-3',
className
)}
{...props}
/>
);
}
export {
Avatar,
AvatarImage,
AvatarFallback,
AvatarBadge,
AvatarGroup,
AvatarGroupCount,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage
} from "@/components/ui/avatar"
```
```tsx
CN
```
## Examples
### With Badge
```tsx
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
export function AvatarWithBadge() {
return (
JD
);
}
```
### Badge with Icon
```tsx
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
import { PlusIcon } from 'lucide-react';
export function AvatarBadgeIcon() {
return (
MK
);
}
```
### Group
```tsx
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from '@/components/ui/avatar';
export function AvatarGroupDemo() {
return (
JD
MK
TS
+3
);
}
```
# Badge
---
title: Badge
description: Displays a badge or a component that looks like a badge.
---
```tsx
import { Badge } from '@/components/ui/badge';
import { BadgeCheckIcon } from 'lucide-react';
export function BadgeDemo() {
return (
Badge
Secondary
Destructive
Outline
8
99
20+
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/badge
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const badgeVariants = cva(
'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
secondary:
'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
destructive:
'bg-destructive/20 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
outline:
'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-background dark:bg-input/30 dark:border-input',
ghost:
'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
link: 'text-primary underline-offset-4 hover:underline',
},
},
defaultVariants: {
variant: 'default',
},
}
);
function Badge({
className,
variant = 'default',
render,
...props
}: useRender.ComponentProps<'span'> & VariantProps) {
return useRender({
defaultTagName: 'span',
props: mergeProps<'span'>(
{
className: cn(badgeVariants({ className, variant })),
},
props
),
render,
state: {
slot: 'badge',
variant,
},
});
}
export { Badge, badgeVariants };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { Badge } from "@/components/ui/badge"
```
```tsx
Badge
```
### Link
You can use the `render` prop to make another component look like a badge. Here's an example of a link that looks like a badge.
```tsx showLineNumbers
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
export function BadgeLink() {
return ) {
return (
Observability Plus is replacing Monitoring
Switch to the improved way to explore your data, with natural
language. Monitoring will no longer be available on the Pro plan in
November, 2025
Allow accessory to connect?
Do you want to allow the USB accessory to connect to this
device?
Don't allow
Allow
Warning
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/card
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
import * as React from 'react';
import { cn } from '@/lib/utils';
function Card({
className,
size = 'default',
...props
}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
return (
img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
className
)}
{...props}
/>
);
}
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx showLineNumbers
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
```
```tsx showLineNumbers
Card Title
Card Description
Card Action
```
# Checkbox Group
---
title: Checkbox Group
description: A group of checkboxes that can be controlled together.
links:
doc: https://base-ui.com/react/components/checkbox-group
api: https://base-ui.com/react/components/checkbox-group#api-reference
---
```tsx
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import { Label } from '@/components/ui/label';
export function CheckboxGroupDefault() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/checkbox-group
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
import { cn } from '@/lib/utils';
function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {
return (
```
## Examples
### With Field
```tsx
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import {
Field,
FieldDescription,
FieldLabel,
} from '@/components/ui/field';
import { Label } from '@/components/ui/label';
export function CheckboxGroupWithField() {
return (
Email Preferences
Choose which emails you'd like to receive.
);
}
```
# Checkbox
---
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
links:
doc: https://base-ui.com/react/components/checkbox
api: https://base-ui.com/react/components/checkbox#api-reference
---
```tsx
import { Checkbox } from '@/components/ui/checkbox';
export function CheckboxDefault() {
return
);
}
export { Checkbox };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { Checkbox } from "@/components/ui/checkbox"
```
```tsx
Show more
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/collapsible
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
return
Toggle
Content that can be shown or hidden.
```
# Combobox
---
title: Combobox
description: A searchable dropdown that allows users to filter and select from a list of options.
links:
doc: https://base-ui.com/react/components/combobox
api: https://base-ui.com/react/components/combobox#api-reference
---
```tsx
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const frameworks = ['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'Nuxt'];
export function ComboboxDefault() {
return (
No frameworks found.
{(item) => (
{item}
)}
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/combobox
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from '@/components/ui/input-group';
import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
const Combobox = ComboboxPrimitive.Root;
function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
return
{children}
);
}
function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
return (
{showTrigger && (
{children}
);
}
function ComboboxContent({
className,
side = 'bottom',
sideOffset = 6,
align = 'start',
alignOffset = 0,
anchor,
...props
}: ComboboxPrimitive.Popup.Props &
Pick<
ComboboxPrimitive.Positioner.Props,
'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
>) {
return (
);
}
function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
return (
{children}
);
}
function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
return (
&
ComboboxPrimitive.Chips.Props) {
return (
{children}
{showRemove && (
);
}
function ComboboxChipsInput({
className,
...props
}: ComboboxPrimitive.Input.Props) {
return (
(null);
}
export {
Combobox,
ComboboxInput,
ComboboxContent,
ComboboxList,
ComboboxItem,
ComboboxGroup,
ComboboxLabel,
ComboboxCollection,
ComboboxEmpty,
ComboboxSeparator,
ComboboxChips,
ComboboxChip,
ComboboxChipsInput,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
```
```tsx
const items = ['Apple', 'Banana', 'Orange', 'Grape'];
No fruits found.
{(item) => (
{item}
)}
```
## Examples
### With Clear Button
```tsx
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const countries = [
'United States',
'United Kingdom',
'Canada',
'Australia',
'Germany',
'France',
];
export function ComboboxWithClear() {
return (
No countries found.
{(item) => (
{item}
)}
);
}
```
### Multiple Selection
```tsx
'use client';
import * as React from 'react';
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from '@/components/ui/combobox';
const frameworks = [
'Next.js',
'SvelteKit',
'Nuxt.js',
'Remix',
'Astro',
] as const;
export function ComboboxMultiple() {
const anchor = useComboboxAnchor();
return (
{(values) => (
{values.map((value: string) => (
{value}
))}
)}
No items found.
{(item) => (
{item}
)}
);
}
```
### Grouped Items
```tsx
'use client';
import {
Combobox,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
} from '@/components/ui/combobox';
const timezones = [
{
value: 'Americas',
items: [
'(GMT-5) New York',
'(GMT-8) Los Angeles',
'(GMT-6) Chicago',
'(GMT-5) Toronto',
'(GMT-8) Vancouver',
'(GMT-3) São Paulo',
],
},
{
value: 'Europe',
items: [
'(GMT+0) London',
'(GMT+1) Paris',
'(GMT+1) Berlin',
'(GMT+1) Rome',
'(GMT+1) Madrid',
'(GMT+1) Amsterdam',
],
},
{
value: 'Asia/Pacific',
items: [
'(GMT+9) Tokyo',
'(GMT+8) Shanghai',
'(GMT+8) Singapore',
'(GMT+4) Dubai',
'(GMT+11) Sydney',
'(GMT+9) Seoul',
],
},
] as const;
export function ComboboxWithGroupsAndSeparator() {
return (
No timezones found.
{(group, index) => (
{group.value}
{(item) => (
{item}
)}
{index < timezones.length - 1 &&
)}
);
}
```
### Invalid State
```tsx
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const frameworks = ['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'Nuxt'];
export function ComboboxInvalid() {
return (
No frameworks found.
{(item) => (
{item}
)}
);
}
```
### Disabled
```tsx
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const frameworks = ['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'Nuxt'];
export function ComboboxDisabled() {
return (
No frameworks found.
{(item) => (
{item}
)}
);
}
```
### Auto Highlight
```tsx
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const frameworks = ['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'Nuxt'];
export function ComboboxAutoHighlight() {
return (
No frameworks found.
{(item) => (
{item}
)}
);
}
```
# Context Menu
---
title: Context Menu
description: A menu that appears on right-click, providing contextual actions for the target element.
links:
doc: https://base-ui.com/react/components/context-menu
api: https://base-ui.com/react/components/context-menu#api-reference
---
```tsx
'use client';
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuSeparator,
ContextMenuTrigger,
} from '@/components/ui/context-menu';
export function ContextMenuDefault() {
return (
Right click here
Back
Forward
Reload
Save As...
Print...
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/context-menu
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
const ContextMenu = ContextMenuPrimitive.Root;
function ContextMenuTrigger({
className,
...props
}: ContextMenuPrimitive.Trigger.Props) {
return (
);
}
function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
return (
{children}
);
}
function ContextMenuRadioGroup({
...props
}: ContextMenuPrimitive.RadioGroup.Props) {
return (
{children}
);
}
function ContextMenuGroupLabel({
className,
...props
}: ContextMenuPrimitive.GroupLabel.Props) {
return (
{children}
);
}
function ContextMenuSubPopup({
align = 'start',
sideOffset = 1,
alignOffset = -4,
className,
...props
}: ContextMenuPrimitive.Popup.Props & {
align?: ContextMenuPrimitive.Positioner.Props['align'];
sideOffset?: ContextMenuPrimitive.Positioner.Props['sideOffset'];
alignOffset?: ContextMenuPrimitive.Positioner.Props['alignOffset'];
}) {
return (
Right click here
Back
Forward
Save As...
```
## Examples
### With Submenu
```tsx
'use client';
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubPopup,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from '@/components/ui/context-menu';
export function ContextMenuWithSubmenu() {
return (
Right click here
New Tab
New Window
More Tools
Save Page As...
Create Shortcut...
Developer Tools
Settings
);
}
```
# Dialog
---
title: Dialog
description: A modal window that appears on top of the main content, requiring user interaction.
links:
doc: https://base-ui.com/react/components/dialog
api: https://base-ui.com/react/components/dialog#api-reference
---
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
export function DialogDefault() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/dialog
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
import { XIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
return
{children}
{showCloseButton && (
);
}
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function DialogFooter({
className,
showCloseButton = false,
children,
...props
}: React.ComponentProps<'div'> & {
showCloseButton?: boolean;
}) {
return (
Notifications
You are all caught up. Good job!
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/drawer
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
import { cn } from '@/lib/utils';
function Drawer({
swipeDirection = 'down',
...props
}: DrawerPrimitive.Root.Props) {
return (
& {
className?: string;
}) {
return (
& {
className?: string;
}) {
return (
& {
className?: string;
}) {
return (
& {
className?: string;
}) {
return (
& {
className?: string;
container?: DrawerPrimitive.Portal.Props['container'];
showHandle?: boolean;
unstyled?: boolean;
overlayClassName?: string;
}) {
return (
{!unstyled && showHandle !== false && (
);
}
function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function DrawerTitle({
className,
...props
}: Omit & {
className?: string;
}) {
return (
& {
className?: string;
}) {
return (
& {
className?: string;
}) {
return (
Open
Drawer Title
Drawer description goes here.
Close
```
## Examples
### Right Side
Use `swipeDirection="right"` on the `Drawer` component to slide the panel in from the right.
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerRight() {
return (
Drawer
This is a drawer that slides in from the side. You can swipe to
dismiss it.
);
}
```
### Non-Modal
Set `modal={false}` and `disablePointerDismissal` on the `Drawer` to keep the page interactive while the drawer is open.
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerNonModal() {
return (
Non-modal Drawer
This drawer does not trap focus and ignores outside clicks. Use
the close button or swipe to dismiss it.
);
}
```
### Nested Drawers
Nest multiple `Drawer` components and manage each with controlled `open` / `onOpenChange` state to create a stacking effect.
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerNested() {
const [firstOpen, setFirstOpen] = React.useState(false);
const [secondOpen, setSecondOpen] = React.useState(false);
const [thirdOpen, setThirdOpen] = React.useState(false);
return (
{
setFirstOpen(nextOpen);
if (!nextOpen) {
setSecondOpen(false);
setThirdOpen(false);
}
}}
>
Account
Nested drawers can be styled to stack, while each drawer remains
independently focus managed.
{
setSecondOpen(nextOpen);
if (!nextOpen) {
setThirdOpen(false);
}
}}
>
Security
Review sign-in activity and update your security
preferences.
Advanced
This drawer is taller to demonstrate
variable-height stacking.
);
}
```
### Snap Points
Pass a `snapPoints` array to `Drawer` and use `unstyled` on `DrawerPopup` to apply custom popup styling for snap behavior.
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
const TOP_MARGIN_REM = 1;
const VISIBLE_SNAP_POINTS_REM = [30];
function toViewportSnapPoint(heightRem: number) {
return `${heightRem + TOP_MARGIN_REM}rem`;
}
const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
export function DrawerSnapPoints() {
return (
Snap points
Drag the sheet to snap between a compact peek and a near
full-height view.
);
}
```
### Action Sheet
Use `DrawerPopup` with `unstyled` and `overlayClassName` to customize the popup and overlay styling for an action sheet layout.
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
const ACTIONS = [
'Unfollow',
'Mute',
'Add to Favourites',
'Add to Close Friends',
'Restrict',
];
export function DrawerActionSheet() {
const [open, setOpen] = React.useState(false);
return (
Profile actions
Choose an action for this user.
);
}
```
# Dropdown Menu
---
title: Dropdown Menu
description: A menu that appears when clicking a trigger element, providing a list of actions or options.
links:
doc: https://base-ui.com/react/components/menu
api: https://base-ui.com/react/components/menu#api-reference
---
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
export function DropdownMenuDefault() {
return (
Profile
Settings
Billing
Log out
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/dropdown-menu
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
import { CheckIcon, ChevronRightIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
return
);
}
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
return
{children}
);
}
function DropdownMenuSubContent({
align = 'start',
alignOffset = -3,
side = 'right',
sideOffset = 0,
className,
...props
}: React.ComponentProps) {
return (
{children}
);
}
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
return (
{children}
);
}
function DropdownMenuSeparator({
className,
...props
}: MenuPrimitive.Separator.Props) {
return (
Open
Profile
Settings
Log out
```
## Examples
### With Submenu
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
export function DropdownMenuWithSubmenu() {
return (
New File
⌘N
Open File
⌘O
Share
Email
Messages
More options
Copy Link
QR Code
AirDrop
Print
⌘P
);
}
```
### Checkboxes
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
export function DropdownMenuCheckboxes() {
const [emailNotifs, setEmailNotifs] = React.useState(true);
const [pushNotifs, setPushNotifs] = React.useState(false);
const [smsNotifs, setSmsNotifs] = React.useState(false);
return (
Notify me via
Email
Push notifications
SMS
);
}
```
### Radio Group
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
export function DropdownMenuRadioGroupDemo() {
const [sortBy, setSortBy] = React.useState('date');
return (
Sort order
Name
Date
Size
);
}
```
# Field
---
title: Field
description: A form field wrapper that associates a label, description, and error message with an input.
links:
doc: https://base-ui.com/react/components/field
api: https://base-ui.com/react/components/field#api-reference
---
```tsx
'use client';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
export function FieldDefault() {
return (
Email
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/field
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Field as FieldPrimitive } from '@base-ui/react/field';
import { cn } from '@/lib/utils';
function Field({ className, ...props }: FieldPrimitive.Root.Props) {
return (
Email
We'll never share your email.
Please enter a valid email address.
```
## Examples
### With Description
```tsx
'use client';
import {
Field,
FieldDescription,
FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
export function FieldWithDescription() {
return (
Username
This will be your public display name.
);
}
```
# Fieldset
---
title: Fieldset
description: A container for grouping related form fields with a legend.
links:
doc: https://base-ui.com/react/components/fieldset
api: https://base-ui.com/react/components/fieldset#api-reference
---
```tsx
'use client';
import { Field, FieldLabel } from '@/components/ui/field';
import { Fieldset, FieldsetLegend } from '@/components/ui/fieldset';
import { Input } from '@/components/ui/input';
export function FieldsetDefault() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/fieldset
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
import { cn } from '@/lib/utils';
function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
return (
Hover over me
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/hover-card
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
import { cn } from '@/lib/utils';
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
return
);
}
export { HoverCard, HoverCardTrigger, HoverCardContent };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card"
```
```tsx
Hover over me
```
## Examples
### Sides
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from '@/components/ui/hover-card';
const HOVER_CARD_SIDES = ['left', 'top', 'bottom', 'right'] as const;
export function HoverCardSides() {
return (
https://
@
years
Max 200 characters
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/input-group
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
Card Content
Card Footer
The chevron icon rotates when the panel is open.
{children}
{showCloseButton && (
Close}
/>
)}
);
}
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
return (
- Passkeys enabled
- 2FA via authenticator app
- 3 signed-in devices
{Array.from({ length: 20 }, (_, index) => (
))}
-
{ACTIONS.map((action, index) => (
-
{index === 0 && (
Close action sheet )}
))}
Hover Card
This is a hover card that appears on hover. It can contain any content you want to display.
Preview content goes here.
{HOVER_CARD_SIDES.map((side) => (
{side}
}
/>
))}
);
}
```
# Input Group
---
title: Input Group
description: An input with addons like icons, buttons, or text on either side.
---
```tsx
'use client';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from '@/components/ui/input-group';
export function InputGroupDefault() {
return (
Hover Card
This hover card appears on the {side} side of the trigger.
[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
className
)}
{...props}
/>
);
}
const inputGroupAddonVariants = cva(
"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
{
variants: {
align: {
'inline-start':
'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
'inline-end':
'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
'block-start':
'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
'block-end':
'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
},
},
defaultVariants: {
align: 'inline-start',
},
}
);
function InputGroupAddon({
className,
align = 'inline-start',
...props
}: React.ComponentProps<'div'> & VariantProps) {
return (
{
if ((e.target as HTMLElement).closest('button')) {
return;
}
e.currentTarget.parentElement?.querySelector('input')?.focus();
}}
{...props}
/>
);
}
const inputGroupButtonVariants = cva(
'gap-2 text-sm shadow-none flex items-center',
{
variants: {
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
sm: '',
'icon-xs':
'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
},
},
defaultVariants: {
size: 'xs',
},
}
);
function InputGroupButton({
className,
type = 'button',
variant = 'ghost',
size = 'xs',
...props
}: Omit, 'size' | 'type'> &
VariantProps & {
type?: 'button' | 'submit' | 'reset';
}) {
return (
);
}
function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
return (
);
}
function InputGroupInput({
className,
...props
}: React.ComponentProps<'input'>) {
return (
);
}
function InputGroupTextarea({
className,
...props
}: React.ComponentProps<'textarea'>) {
return (
);
}
export {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupText,
InputGroupInput,
InputGroupTextarea,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/components/ui/input-group"
```
```tsx
```
# Input
---
title: Input
description: A text input field for capturing user data.
links:
doc: https://base-ui.com/react/components/input
api: https://base-ui.com/react/components/input#api-reference
---
```tsx
'use client';
import { Input } from '@/components/ui/input';
export function InputDefault() {
return ;
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/input
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
import * as React from 'react';
import { Input as InputPrimitive } from '@base-ui/react/input';
import { cn } from '@/lib/utils';
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
return (
{children ? (
children
) : (
)}
);
}
function MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {
return (
Storage Used
);
}
```
# Navigation Menu
---
title: Navigation Menu
description: A collection of links and menus for website navigation.
links:
doc: https://base-ui.com/react/components/navigation-menu
api: https://base-ui.com/react/components/navigation-menu#api-reference
---
```tsx
'use client';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIcon,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
const overviewLinks = [
{
href: '#',
title: 'Quick Start',
description: 'Install and assemble your first component.',
},
{
href: '#',
title: 'Accessibility',
description: 'Learn how we build accessible components.',
},
{
href: '#',
title: 'Releases',
description: "See what's new in the latest versions.",
},
{
href: '#',
title: 'About',
description: 'Learn more about the project and our mission.',
},
] as const;
const handbookLinks = [
{
href: '#',
title: 'Styling',
description:
'Components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.',
},
{
href: '#',
title: 'Animation',
description:
'Components can be animated with CSS transitions, CSS animations, or JavaScript libraries.',
},
{
href: '#',
title: 'Composition',
description:
'Components can be replaced and composed with your own existing components.',
},
] as const;
export function NavigationMenuDefault() {
return (
Overview
Handbook
GitHub
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/navigation-menu
```
**Install the following dependencies:**
```bash
npm install @base-ui/react lucide-react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
import { ChevronDownIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
function NavigationMenu({
className,
...props
}: React.ComponentPropsWithRef) {
return (
) {
return (
) {
return (
{children ??
);
}
function NavigationMenuContent({
className,
...props
}: NavigationMenuPrimitive.Content.Props) {
return (
({
...defaultStyle,
...styleProp(state),
})
: { ...defaultStyle, ...styleProp }
}
{...props}
>
);
}
function NavigationMenuViewport({
className,
...props
}: NavigationMenuPrimitive.Viewport.Props) {
return (
);
}
export {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuIcon,
NavigationMenuContent,
NavigationMenuLink,
NavigationMenuBackdrop,
NavigationMenuPortal,
NavigationMenuPositioner,
NavigationMenuViewport,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
NavigationMenu,
NavigationMenuArrow,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPopup,
NavigationMenuPortal,
NavigationMenuPositioner,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
```
```tsx
Item One
Link
```
## Examples
### Nested Submenus
```tsx
'use client';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIcon,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { ChevronRightIcon } from 'lucide-react';
const overviewLinks = [
{
href: '#',
title: 'Quick Start',
description: 'Install and assemble your first component.',
},
{
href: '#',
title: 'Accessibility',
description: 'Learn how we build accessible components.',
},
{
href: '#',
title: 'Releases',
description: "See what's new in the latest versions.",
},
] as const;
const handbookLinks = [
{
href: '#',
title: 'Styling',
description:
'Components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.',
},
{
href: '#',
title: 'Animation',
description:
'Components can be animated with CSS transitions, CSS animations, or JavaScript libraries.',
},
{
href: '#',
title: 'Composition',
description:
'Components can be replaced and composed with your own existing components.',
},
] as const;
export function NavigationMenuNested() {
return (
Overview
GitHub
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/number-field
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Label } from '@/components/ui/label';
import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
import { MinusIcon, MoveHorizontal, PlusIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
const NumberFieldContext = React.createContext<{
fieldId: string;
} | null>(null);
function NumberField({
id,
className,
...props
}: NumberFieldPrimitive.Root.Props) {
const numberFieldId = React.useId();
const fieldId = id ?? numberFieldId;
return (
);
}
function NumberFieldScrubArea({
className,
label,
...props
}: NumberFieldPrimitive.ScrubArea.Props & { label: string }) {
const context = React.useContext(NumberFieldContext);
if (!context) {
throw new Error(
'NumberFieldScrubArea must be used within the NumberField.'
);
}
return (
);
}
function NumberFieldGroup({
className,
...props
}: NumberFieldPrimitive.Group.Props) {
return (
);
}
function NumberFieldIncrement({
className,
...props
}: NumberFieldPrimitive.Increment.Props) {
return (
);
}
function NumberFieldInput({
className,
...props
}: NumberFieldPrimitive.Input.Props) {
return (
```
## Examples
### With Scrub Area
```tsx
'use client';
import {
NumberField,
NumberFieldDecrement,
NumberFieldGroup,
NumberFieldIncrement,
NumberFieldInput,
NumberFieldScrubArea,
} from '@/components/ui/number-field';
export function NumberFieldWithScrub() {
return (
);
}
```
# Popover
---
title: Popover
description: A floating panel that appears next to a trigger element.
links:
doc: https://base-ui.com/react/components/popover
api: https://base-ui.com/react/components/popover#api-reference
---
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverTitle,
PopoverTrigger,
} from '@/components/ui/popover';
export function PopoverDefault() {
return (
Dimensions
Set the dimensions for the layer.
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/popover
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
import { cn } from '@/lib/utils';
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
return
);
}
function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
return (
Open
Title
Description goes here.
```
## Examples
### With Form
```tsx
'use client';
import { Button } from '@/components/ui/button';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverTitle,
PopoverTrigger,
} from '@/components/ui/popover';
export function PopoverWithForm() {
return (
Edit Profile
Make changes to your profile here.
Name
Email
);
}
```
# Progress
---
title: Progress
description: A progress bar that shows completion status of a task.
links:
doc: https://base-ui.com/react/components/progress
api: https://base-ui.com/react/components/progress#api-reference
---
```tsx
'use client';
import * as React from 'react';
import { Progress } from '@/components/ui/progress';
export function ProgressDefault() {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setValue((current) =>
Math.min(100, Math.round(current + Math.random() * 25))
);
}, 1000);
return () => clearInterval(interval);
}, []);
return ;
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/progress
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
import { cn } from '@/lib/utils';
function Progress({
className,
children,
value,
...props
}: ProgressPrimitive.Root.Props) {
return (
{children}
);
}
function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/radio-group
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Radio as RadioPrimitive } from '@base-ui/react/radio';
import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
import { CircleIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
return (
);
}
export { RadioGroup, RadioGroupItem };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
```
```tsx
```
# Scroll Area
---
title: Scroll Area
description: A scrollable container with custom scrollbars.
links:
doc: https://base-ui.com/react/components/scroll-area
api: https://base-ui.com/react/components/scroll-area#api-reference
---
```tsx
'use client';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
);
export function ScrollAreaDefault() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/scroll-area
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
import { cn } from '@/lib/utils';
function ScrollArea({
className,
children,
orientation,
...props
}: ScrollAreaPrimitive.Root.Props & {
orientation?: 'horizontal' | 'vertical' | 'both';
}) {
return (
{children}
{orientation === 'both' ? (
<>
);
}
function ScrollBar({
className,
orientation = 'vertical',
...props
}: ScrollAreaPrimitive.Scrollbar.Props) {
return (
);
}
export { ScrollArea, ScrollBar };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { ScrollArea } from "@/components/ui/scroll-area"
```
```tsx
```
## Examples
### Horizontal
```tsx
'use client';
import { ScrollArea } from '@/components/ui/scroll-area';
const items = Array.from({ length: 20 }).map((_, i) => ({
id: i + 1,
name: `Item ${i + 1}`,
}));
export function ScrollAreaHorizontal() {
return (
);
}
```
# Select
---
title: Select
description: A dropdown menu for selecting a value from a list of options.
links:
doc: https://base-ui.com/react/components/select
api: https://base-ui.com/react/components/select#api-reference
---
```tsx
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
const fonts = [
{ label: 'Select font', value: null },
{ label: 'Sans-serif', value: 'sans' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
export function SelectDemo() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/select
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Select as SelectPrimitive } from '@base-ui/react/select';
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
const Select = SelectPrimitive.Root;
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
return (
{children}
);
}
function SelectContent({
className,
children,
side = 'bottom',
sideOffset = 4,
align = 'center',
alignOffset = 0,
alignItemWithTrigger = true,
...props
}: SelectPrimitive.Popup.Props &
Pick<
SelectPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
>) {
return (
{children}
);
}
function SelectLabel({
className,
...props
}: SelectPrimitive.GroupLabel.Props) {
return (
{children}
);
}
function SelectSeparator({
className,
...props
}: SelectPrimitive.Separator.Props) {
return (
) {
return (
);
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps) {
return (
);
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
```
```tsx
```
## Examples
### Grouped
```tsx
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
export function SelectGroups() {
const fruits = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Blueberry', value: 'blueberry' },
];
const vegetables = [
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
const allItems = [
{ label: 'Select a fruit', value: null },
...fruits,
...vegetables,
];
return (
);
}
```
# Separator
---
title: Separator
description: A visual divider between content sections.
links:
doc: https://base-ui.com/react/components/separator
api: https://base-ui.com/react/components/separator#api-reference
---
```tsx
'use client';
import { Separator } from '@/components/ui/separator';
export function SeparatorDefault() {
return (
{Array.from({ length: _values.length }, (_, index) => (
);
}
export { Slider };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { Slider, SliderValue } from "@/components/ui/slider"
```
```tsx
);
}
export { Switch };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { Switch } from "@/components/ui/switch"
```
```tsx
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/tabs
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
import { cn } from '@/lib/utils';
type TabsVariant = 'default' | 'underline';
function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
return (
{children}
);
}
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
return (
Account content
Password content
```
## Examples
### Underline
Use `variant="underline"` on the `TabsList` for an underline style indicator.
```tsx
'use client';
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from '@/components/ui/tabs';
export function TabsUnderline() {
return (
);
}
```
# Textarea
---
title: Textarea
description: A multi-line text input field.
---
```tsx
'use client';
import { Textarea } from '@/components/ui/textarea';
export function TextareaDefault() {
return ;
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/textarea
```
**Copy and paste the following code into your project.**
```tsx
import * as React from 'react';
import { cn } from '@/lib/utils';
function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
return (
);
}
export { Textarea };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { Textarea } from "@/components/ui/textarea"
```
```tsx
```
## Examples
### With Label
```tsx
'use client';
import {
Field,
FieldDescription,
FieldLabel,
} from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';
export function TextareaWithLabel() {
return (
Bio
You can @mention other users and organizations.
);
}
```
# Toggle Group
---
title: Toggle Group
description: A set of toggle buttons that allows single or multiple selections.
links:
doc: https://base-ui.com/react/components/toggle-group
api: https://base-ui.com/react/components/toggle-group#api-reference
---
```tsx
'use client';
import {
ToggleGroup,
ToggleGroupItem,
} from '@/components/ui/toggle-group';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';
export function ToggleGroupDefault() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/toggle-group
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Toggle, toggleVariants } from '@/components/ui/toggle';
import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
import { type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const ToggleGroupContext = React.createContext<
VariantProps
>({
size: 'default',
variant: 'default',
});
function ToggleGroup({
className,
variant,
size,
children,
...props
}: ToggleGroupPrimitive.Props & VariantProps) {
return (
{children}
);
}
function ToggleGroupItem({
className,
children,
variant,
size,
...props
}: React.ComponentProps & VariantProps) {
const context = React.useContext(ToggleGroupContext);
return (
{children}
);
}
export { ToggleGroup, ToggleGroupItem };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
```
```tsx
Left
Center
Right
```
## Examples
### Multiple
Use `multiple` to allow multiple items to be selected.
```tsx
'use client';
import {
ToggleGroup,
ToggleGroupItem,
} from '@/components/ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';
export function ToggleGroupMultiple() {
return (
);
}
```
# Toggle
---
title: Toggle
description: A two-state button that can be either on or off.
links:
doc: https://base-ui.com/react/components/toggle
api: https://base-ui.com/react/components/toggle#api-reference
---
```tsx
'use client';
import { Toggle } from '@/components/ui/toggle';
import { Bold } from 'lucide-react';
export function ToggleDefault() {
return (
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/toggle
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const toggleVariants = cva(
"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{
variants: {
variant: {
default: 'bg-transparent',
outline: 'border-input hover:bg-muted border bg-transparent',
},
size: {
default: 'h-8 min-w-8 px-2',
sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',
lg: 'h-9 min-w-9 px-2.5',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
}
);
function Toggle({
className,
variant = 'default',
size = 'default',
...props
}: TogglePrimitive.Props & VariantProps) {
return (
```
## Examples
### Outline
```tsx
'use client';
import { Toggle } from '@/components/ui/toggle';
import { Italic } from 'lucide-react';
export function ToggleOutline() {
return (
);
}
```
### With Text
```tsx
'use client';
import { Toggle } from '@/components/ui/toggle';
import { Italic } from 'lucide-react';
export function ToggleWithText() {
return (
);
}
```
# Toolbar
---
title: Toolbar
description: A container for grouping a set of buttons and controls.
links:
doc: https://base-ui.com/react/components/toolbar#api-reference
---
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {
ToggleGroup,
ToggleGroupItem,
} from '@/components/ui/toggle-group';
import {
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarSeparator,
} from '@/components/ui/toolbar';
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import {
AlignCenter,
AlignLeft,
AlignRight,
DollarSign,
Percent,
} from 'lucide-react';
const fonts = [
{ label: 'Helvetica', value: 'helvetica' },
{ label: 'Arial', value: 'arial' },
];
export function ToolbarDefault() {
return (
Align left
Align center
Align right
Format as currency
Format as percent
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/toolbar
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
import { cn } from '@/lib/utils';
function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
return (
```
# Tooltip
---
title: Tooltip
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
links:
doc: https://base-ui.com/react/components/tooltip
api: https://base-ui.com/react/components/tooltip#api-reference
---
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
export function TooltipDefault() {
return (
Hover me} />
Add to library
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/tooltip
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
import { cn } from '@/lib/utils';
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
return
);
}
function TooltipPopup({
className,
align = 'center',
sideOffset = 9,
side = 'top',
children,
...props
}: TooltipPrimitive.Popup.Props & {
align?: TooltipPrimitive.Positioner.Props['align'];
side?: TooltipPrimitive.Positioner.Props['side'];
sideOffset?: TooltipPrimitive.Positioner.Props['sideOffset'];
}) {
return (
{children}
);
}
export { TooltipProvider, Tooltip, TooltipTrigger, TooltipPopup };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
```
```tsx
Hover
Tooltip content
```
## Examples
### Positions
Use the `side` prop on `TooltipPopup` to control the position.
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
export function TooltipPositions() {
return (
Top} />
Tooltip on top
Right} />
Tooltip on right
Bottom} />
Tooltip on bottom
Left} />
Tooltip on left
);
}
```
# Liquid Metal Avatar
---
title: Liquid Metal Avatar
description: An avatar with an animated liquid metal shader effect.
---
```tsx
import {
AvatarFallback,
AvatarImage,
LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';
export function LiquidMetalAvatarDefault() {
return (
JD
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/liquid-metal-avatar
```
**Install the following dependencies:**
```bash
npm install @paper-design/shaders-react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
import { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const avatarVariants = cva(
'relative flex items-center justify-center rounded-full overflow-visible bg-transparent',
{
variants: {
size: {
sm: 'size-8',
md: 'size-12',
lg: 'size-16',
},
},
defaultVariants: { size: 'md' },
}
);
const innerVariants = cva(
'absolute rounded-full bg-primary-foreground inset-shadow-lg',
{
variants: {
size: {
sm: 'inset-[1px]',
md: 'inset-[2px]',
lg: 'inset-[3px]',
},
},
defaultVariants: { size: 'md' },
}
);
type ShaderProps = Omit;
type LiquidMetalAvatarProps = React.ComponentProps<'div'> &
Partial &
VariantProps;
function LiquidMetalAvatar({
size,
className,
children,
speed = 0.6,
repetition = 4,
softness = 0.5,
shiftRed = 0.3,
shiftBlue = 0.3,
distortion = 0,
contour = 0,
angle = 45,
scale = 8,
offsetX = 0.1,
offsetY = -0.1,
...props
}: LiquidMetalAvatarProps) {
return (
{children}
);
}
export { LiquidMetalAvatar, AvatarImage, AvatarFallback };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
LiquidMetalAvatar,
AvatarImage,
AvatarFallback,
} from "@/components/ui/liquid-metal-avatar"
```
```tsx
JD
```
## Examples
### Sizes
```tsx
import {
AvatarFallback,
AvatarImage,
LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';
export function LiquidMetalAvatarSizes() {
return (
SM
MD
LG
);
}
```
### Custom Effect
```tsx
import {
AvatarFallback,
AvatarImage,
LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';
export function LiquidMetalAvatarCustom() {
return (
AB
);
}
```
### Fallback Only
```tsx
import {
AvatarFallback,
LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';
export function LiquidMetalAvatarFallback() {
return (
JD
);
}
```
## API Reference
### Props
| Prop | Type | Default | Description |
| ------------ | ---------------------- | ------- | ----------------------------------------- |
| `children` | `ReactNode` | - | Avatar content (`AvatarImage`, `AvatarFallback`). |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | The size of the avatar. |
| `speed` | `number` | `0.4` | Animation speed of the shader effect. |
| `repetition` | `number` | `6` | Number of pattern repetitions. |
| `softness` | `number` | `0.5` | Softness of the metallic highlights. |
| `shiftRed` | `number` | `0.3` | Red color shift amount. |
| `shiftBlue` | `number` | `0.3` | Blue color shift amount. |
| `distortion` | `number` | `0` | Distortion amount applied to the pattern. |
| `contour` | `number` | `0` | Contour intensity. |
| `angle` | `number` | `45` | Angle of the shader pattern in degrees. |
| `scale` | `number` | `4` | Scale of the shader pattern. |
| `offsetX` | `number` | `0.1` | Horizontal offset of the pattern. |
| `offsetY` | `number` | `-0.1` | Vertical offset of the pattern. |
# Liquid Metal Button
---
title: Liquid Metal Button
description: A button with an animated liquid metal shader effect.
---
This button uses `bg-primary-foreground` so the liquid metal effect blends
naturally with its surroundings—dark on dark in dark mode, light on light in
light mode.
```tsx
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';
export function LiquidMetalButtonDefault() {
return Click me ;
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/liquid-metal-button
```
**Install the following dependencies:**
```bash
npm install @paper-design/shaders-react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Button } from '@/components/ui/button';
import { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
'relative flex items-center justify-center bg-transparent border-none cursor-pointer outline-none rounded-full overflow-hidden font-medium whitespace-nowrap text-primary',
{
variants: {
size: {
sm: 'min-w-28 h-9 px-4 text-xs',
md: 'min-w-35.5 h-11.5 px-5 text-sm',
lg: 'min-w-44 h-14 px-6 text-base',
},
},
defaultVariants: { size: 'md' },
}
);
type ShaderProps = Omit;
type LiquidMetalButtonProps = Omit<
React.ComponentProps,
'variant' | 'size'
> &
Partial &
VariantProps;
export function LiquidMetalButton({
children,
size,
className,
ref,
speed = 0.6,
repetition = 4,
softness = 0.5,
shiftRed = 0.3,
shiftBlue = 0.3,
distortion = 0,
contour = 0,
angle = 45,
scale = 8,
offsetX = 0.1,
offsetY = -0.1,
...props
}: LiquidMetalButtonProps) {
return (
);
}
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { LiquidMetalButton } from "@/components/ui/liquid-metal-button"
```
```tsx
Click me
```
## Examples
### Sizes
```tsx
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';
export function LiquidMetalButtonSizes() {
return (
Small
Medium
Large
);
}
```
### Custom Effect
```tsx
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';
export function LiquidMetalButtonCustom() {
return (
Custom Effect
);
}
```
## API Reference
### Props
| Prop | Type | Default | Description |
| ------------ | ---------------------- | ------- | ----------------------------------------- |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | The size of the button. |
| `speed` | `number` | `0.6` | Animation speed of the shader effect. |
| `repetition` | `number` | `4` | Number of pattern repetitions. |
| `softness` | `number` | `0.5` | Softness of the metallic highlights. |
| `shiftRed` | `number` | `0.3` | Red color shift amount. |
| `shiftBlue` | `number` | `0.3` | Blue color shift amount. |
| `distortion` | `number` | `0` | Distortion amount applied to the pattern. |
| `contour` | `number` | `0` | Contour intensity. |
| `angle` | `number` | `45` | Angle of the shader pattern in degrees. |
| `scale` | `number` | `8` | Scale of the shader pattern. |
| `offsetX` | `number` | `0.1` | Horizontal offset of the pattern. |
| `offsetY` | `number` | `-0.1` | Vertical offset of the pattern. |
# Liquid Metal Card
---
title: Liquid Metal Card
description: A card with an animated liquid metal shader effect.
---
This card uses `bg-card` so the liquid metal effect blends
naturally with its surroundings—dark on dark in dark mode, light on light in
light mode.
```tsx
import { Button } from '@/components/ui/button';
import {
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
LiquidMetalCard,
} from '@/components/ui/liquid-metal-card';
export function LiquidMetalCardDefault() {
return (
Create project
Deploy your new project in one-click.
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/liquid-metal-card
```
**Install the following dependencies:**
```bash
npm install @paper-design/shaders-react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';
import { cn } from '@/lib/utils';
type ShaderProps = Omit;
type LiquidMetalCardProps = React.ComponentProps &
Partial;
function LiquidMetalCard({
className,
children,
speed = 0.6,
repetition = 4,
softness = 0.5,
shiftRed = 0.3,
shiftBlue = 0.3,
distortion = 0,
contour = 0,
angle = 45,
scale = 8,
offsetX = 0.1,
offsetY = -0.1,
...props
}: LiquidMetalCardProps) {
return (
);
}
export {
LiquidMetalCard,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
LiquidMetalCard,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/ui/liquid-metal-card"
```
```tsx
Card Title
Card Description
```
## Examples
### Custom Effect
```tsx
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
LiquidMetalCard,
} from '@/components/ui/liquid-metal-card';
export function LiquidMetalCardCustom() {
return (
Notifications
You have 3 unread messages.
New
);
}
```
### Player
```tsx
import { Button } from '@/components/ui/button';
import {
CardContent,
CardDescription,
CardHeader,
CardTitle,
LiquidMetalCard,
} from '@/components/ui/liquid-metal-card';
import { Play, SkipBack, SkipForward } from 'lucide-react';
export function LiquidMetalCardPlayer() {
return (
The Summoning
Sleep Token · Take Me Back to Eden
);
}
```
### Login
```tsx
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
CardContent,
CardDescription,
CardHeader,
CardTitle,
LiquidMetalCard,
} from '@/components/ui/liquid-metal-card';
import { User } from 'lucide-react';
import { Icons } from '@/components/icons';
export function LiquidMetalCardLogin() {
return (
Welcome back
Sign in to your account
);
}
```
## API Reference
### Props
| Prop | Type | Default | Description |
| ------------ | -------- | ------- | ----------------------------------------- |
| `speed` | `number` | `0.6` | Animation speed of the shader effect. |
| `repetition` | `number` | `4` | Number of pattern repetitions. |
| `softness` | `number` | `0.5` | Softness of the metallic highlights. |
| `shiftRed` | `number` | `0.3` | Red color shift amount. |
| `shiftBlue` | `number` | `0.3` | Blue color shift amount. |
| `distortion` | `number` | `0` | Distortion amount applied to the pattern. |
| `contour` | `number` | `0` | Contour intensity. |
| `angle` | `number` | `45` | Angle of the shader pattern in degrees. |
| `scale` | `number` | `8` | Scale of the shader pattern. |
| `offsetX` | `number` | `0.1` | Horizontal offset of the pattern. |
| `offsetY` | `number` | `-0.1` | Vertical offset of the pattern. |
# Mesh Gradient Card
---
title: Mesh Gradient Card
description: A card with an animated mesh gradient shader effect that cycles through configurable steps.
---
This card uses a WebGL mesh gradient shader from `@paper-design/shaders-react`
and animates between gradient steps using `motion`. Text is white by default
to contrast with the gradient background.
```tsx
import {
MeshGradientCard,
MeshGradientCardMessage,
MeshGradientCardMessages,
} from '@/components/ui/mesh-gradient-card';
const messages = [
'Painting with light.',
'Shifting dimensions.',
'Breathing color.',
'Tracing the unseen.',
'Folding horizons.',
'Dissolving edges.',
'Drifting through haze.',
];
export function MeshGradientCardDefault() {
return (
{messages.map((msg) => (
{msg}
))}
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/mesh-gradient-card
```
**Install the following dependencies:**
```bash
npm install @paper-design/shaders-react motion
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import React, {
createContext,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from 'react';
import {
MeshGradient,
type MeshGradientParams,
type MeshGradientProps,
} from '@paper-design/shaders-react';
import { animate, AnimatePresence, motion } from 'motion/react';
import { cn } from '@/lib/utils';
type GradientStep = Required<
Pick<
MeshGradientParams,
| 'distortion'
| 'swirl'
| 'grainMixer'
| 'grainOverlay'
| 'speed'
| 'scale'
| 'rotation'
| 'offsetX'
| 'offsetY'
>
>;
const DEFAULT_STEPS: GradientStep[] = [
{
distortion: 0.3,
swirl: 0.1,
grainMixer: 0.16,
grainOverlay: 0.15,
speed: 0.45,
scale: 1.0,
rotation: 0,
offsetX: 0,
offsetY: 0,
},
{
distortion: 0.5,
swirl: 0.3,
grainMixer: 0.1,
grainOverlay: 0.1,
speed: 0.55,
scale: 1.2,
rotation: 15,
offsetX: 0.1,
offsetY: -0.05,
},
{
distortion: 0.4,
swirl: 0.8,
grainMixer: 0.2,
grainOverlay: 0.1,
speed: 0.38,
scale: 0.9,
rotation: -10,
offsetX: -0.15,
offsetY: 0.1,
},
{
distortion: 0.9,
swirl: 0.5,
grainMixer: 0.12,
grainOverlay: 0.2,
speed: 0.65,
scale: 1.4,
rotation: 25,
offsetX: 0.05,
offsetY: -0.1,
},
{
distortion: 0.25,
swirl: 0.2,
grainMixer: 0.6,
grainOverlay: 0.5,
speed: 0.5,
scale: 1.1,
rotation: -5,
offsetX: -0.05,
offsetY: 0.05,
},
{
distortion: 0.6,
swirl: 0.9,
grainMixer: 0.08,
grainOverlay: 0.05,
speed: 0.3,
scale: 0.8,
rotation: 35,
offsetX: 0.12,
offsetY: 0.08,
},
{
distortion: 0.15,
swirl: 0.05,
grainMixer: 0.5,
grainOverlay: 0.4,
speed: 0.6,
scale: 1.3,
rotation: -20,
offsetX: -0.1,
offsetY: -0.08,
},
];
const MeshGradientCardContext = createContext<{ messageIndex: number }>({
messageIndex: 0,
});
type MeshGradientCardProps = Partial<
Omit
> & {
steps?: GradientStep[];
interval?: number;
children?: React.ReactNode;
};
function MeshGradientCardRoot({
className,
...props
}: React.ComponentProps<'div'>) {
return (
);
}
function MeshGradientCard({
className,
children,
colors = ['#fafafa', '#18181b', '#fafafa', '#18181b'],
steps = DEFAULT_STEPS,
interval = 4000,
...shaderProps
}: MeshGradientCardProps) {
const { config, messageIndex } = useGradientCycler(steps, interval);
return (
);
}
function MeshGradientCardMessages({
children,
className,
}: {
children?: React.ReactNode;
className?: string;
}) {
const { messageIndex } = useContext(MeshGradientCardContext);
const items = React.Children.toArray(children);
const active = items[messageIndex % items.length];
return (
{React.isValidElement(active)
? React.cloneElement(active, {
key: messageIndex,
} as React.Attributes)
: active}
);
}
function MeshGradientCardMessage({
children,
className,
}: {
children?: React.ReactNode;
className?: string;
}) {
return (
{children}
);
}
function useGradientCycler(
steps: GradientStep[] = DEFAULT_STEPS,
interval: number = 4000
) {
const [stepIndex, setStepIndex] = useState(0);
const [config, setConfig] = useState(steps[0]);
const animationRef = useRef | null>(null);
const [messageIndex, setMessageIndex] = useState(0);
const goToStep = useCallback(
(n: number) => {
if (n === stepIndex) return;
animationRef.current?.stop();
const from = { ...config };
const to = steps[n];
animationRef.current = animate(from, to, {
duration: 0.6,
ease: 'easeOut',
onUpdate: () => setConfig({ ...from }),
});
setStepIndex(n);
setMessageIndex((i) => i + 1);
},
[stepIndex, config, steps]
);
useEffect(() => {
const id = setTimeout(() => {
goToStep((stepIndex + 1) % steps.length);
}, interval);
return () => clearTimeout(id);
}, [stepIndex, goToStep, steps.length, interval]);
return { config, stepIndex, messageIndex, goToStep };
}
export {
MeshGradientCard,
MeshGradientCardMessage,
MeshGradientCardMessages,
MeshGradientCardRoot,
useGradientCycler,
};
export type { GradientStep, MeshGradientCardProps };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
MeshGradientCard,
MeshGradientCardMessage,
MeshGradientCardMessages,
} from "@/components/ui/mesh-gradient-card"
```
```tsx
const messages = ["First message.", "Second message.", "Third message."]
function Example() {
return (
{messages.map((msg) => (
{msg}
))}
)
}
```
## Examples
### Custom Colors
```tsx
import {
MeshGradientCard,
MeshGradientCardMessage,
MeshGradientCardMessages,
} from '@/components/ui/mesh-gradient-card';
const messages = [
'Forest calm.',
'Emerald glow.',
'Green pulse.',
'Leaf drift.',
'Deep canopy.',
'Jade shimmer.',
'Moss light.',
];
export function MeshGradientCardCustom() {
return (
{messages.map((msg) => (
{msg}
))}
);
}
```
### Custom Steps
```tsx
import {
MeshGradientCard,
MeshGradientCardMessage,
MeshGradientCardMessages,
type GradientStep,
} from '@/components/ui/mesh-gradient-card';
const steps: GradientStep[] = [
{
distortion: 0.8,
swirl: 0.1,
grainMixer: 0.2,
grainOverlay: 0.15,
speed: 0.7,
scale: 1.3,
rotation: 10,
offsetX: 0.1,
offsetY: -0.05,
},
{
distortion: 0.1,
swirl: 0.9,
grainMixer: 0.05,
grainOverlay: 0.08,
speed: 0.4,
scale: 0.85,
rotation: -15,
offsetX: -0.1,
offsetY: 0.1,
},
{
distortion: 0.45,
swirl: 0.45,
grainMixer: 0.12,
grainOverlay: 0.12,
speed: 0.55,
scale: 1.1,
rotation: 20,
offsetX: 0.05,
offsetY: 0.05,
},
];
const messages = ['High distortion.', 'Deep swirl.', 'Balanced flow.'];
export function MeshGradientCardCustomSteps() {
return (
{messages.map((msg) => (
{msg}
))}
);
}
```
## API Reference
### Props
| Prop | Type | Default | Description |
| -------------- | ---------------- | ---------------------------------------------- | ------------------------------------------------ |
| `colors` | `string[]` | `['#fafafa', '#18181b', '#fafafa', '#18181b']` | Array of colors for the mesh gradient. |
| `steps` | `GradientStep[]` | 7 built-in steps | Array of gradient step configurations to cycle. |
| `interval` | `number` | `4000` | Time in ms between gradient step transitions. |
| `distortion` | `number` | per step | Distortion amount applied to the gradient. |
| `swirl` | `number` | per step | Swirl intensity of the gradient. |
| `grainMixer` | `number` | per step | Grain mixer intensity. |
| `grainOverlay` | `number` | per step | Grain overlay intensity. |
| `speed` | `number` | per step | Animation speed of the shader effect. |
| `scale` | `number` | per step | Scale of the gradient pattern. |
| `rotation` | `number` | per step | Rotation angle of the gradient in degrees. |
| `offsetX` | `number` | per step | Horizontal offset of the gradient. |
| `offsetY` | `number` | per step | Vertical offset of the gradient. |
-
{overviewLinks.map((item) => (
-
{item.title}
{item.description}
))}
-
{handbookLinks.map((item) => (
-
{item.title}
{item.description}
))}
-
{overviewLinks.map((item) => (
-
{item.title}
{item.description}
))}
-
}> Handbook How to use components effectively.
-
{handbookLinks.map((item) => (
-
{item.title}
{item.description}
))}
-
Tags
{tags.map((tag, index) => ({tag}
{index < tags.length - 1 &&
{/* Scrollable content */}
{items.map((item) => (
{item.name}
))}
Fab UI
An open-source UI component library.
Blog
Docs
Source
Make changes to your account.
Change your password here.
Adjust your settings here.
View your dashboard overview.
Analyze your data and metrics.
Generate and view reports.
Your new project will be created with the default settings. You can customize it later in the project settings.
{children}
Card Content
Card Footer
Customize the liquid metal effect with props like speed, repetition, softness, and color shifts.
2:15
6:46
or continue with