0
# Data Display Components
1
2
NextUI provides comprehensive components for presenting data, images, and content in organized, accessible formats with rich customization options.
3
4
## Capabilities
5
6
### Table
7
8
A powerful data table component with sorting, selection, pagination, and customizable styling for complex data presentation.
9
10
```typescript { .api }
11
interface TableProps<T = object> {
12
/** Table content */
13
children?: React.ReactNode;
14
/** Accessibility label */
15
"aria-label"?: string;
16
/** Accessibility label reference */
17
"aria-labelledby"?: string;
18
/** Accessibility description reference */
19
"aria-describedby"?: string;
20
/** Table layout algorithm */
21
layout?: "auto" | "fixed";
22
/** Hide table header */
23
hideHeader?: boolean;
24
/** Show selection checkboxes */
25
showSelectionCheckboxes?: boolean;
26
/** Color theme */
27
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
28
/** Selection mode */
29
selectionMode?: SelectionMode;
30
/** Selection behavior */
31
selectionBehavior?: SelectionBehavior;
32
/** Currently selected keys */
33
selectedKeys?: Selection;
34
/** Default selected keys */
35
defaultSelectedKeys?: Selection;
36
/** Prevent empty selection */
37
disallowEmptySelection?: boolean;
38
/** Sort configuration */
39
sortDescriptor?: SortDescriptor;
40
/** Whether header is sticky */
41
isHeaderSticky?: boolean;
42
/** Compact table spacing */
43
isCompact?: boolean;
44
/** Remove table wrapper */
45
removeWrapper?: boolean;
46
/** Striped rows */
47
isStriped?: boolean;
48
/** Full width table */
49
fullWidth?: boolean;
50
/** Bottom content (pagination, etc.) */
51
bottomContent?: React.ReactNode;
52
/** Bottom content placement */
53
bottomContentPlacement?: "inside" | "outside";
54
/** Top content */
55
topContent?: React.ReactNode;
56
/** Top content placement */
57
topContentPlacement?: "inside" | "outside";
58
/** Table checkboxes props */
59
checkboxesProps?: Partial<CheckboxProps>;
60
/** Custom CSS class */
61
className?: string;
62
/** Slot-based styling */
63
classNames?: SlotsToClasses<TableSlots>;
64
/** Selection change handler */
65
onSelectionChange?: (keys: Selection) => void;
66
/** Sort change handler */
67
onSortChange?: (descriptor: SortDescriptor) => void;
68
/** Row action handler */
69
onRowAction?: (key: React.Key) => void;
70
}
71
72
type TableSlots =
73
| "base" | "wrapper" | "table" | "thead" | "tbody" | "tr" | "th" | "td"
74
| "tfoot" | "sortIcon" | "emptyWrapper" | "loadingWrapper";
75
76
type SelectionMode = "none" | "single" | "multiple";
77
type SelectionBehavior = "toggle" | "replace";
78
type Selection = "all" | Set<React.Key>;
79
80
interface SortDescriptor {
81
/** Column key to sort by */
82
column?: React.Key;
83
/** Sort direction */
84
direction?: "ascending" | "descending";
85
}
86
87
function Table<T = object>(props: TableProps<T>): JSX.Element;
88
89
/**
90
* Hook for Table state management
91
*/
92
function useTable<T = object>(props: TableProps<T>): {
93
Component: React.ElementType;
94
slots: Record<TableSlots, string>;
95
classNames: SlotsToClasses<TableSlots>;
96
getTableProps: () => any;
97
getWrapperProps: () => any;
98
getBaseProps: () => any;
99
};
100
```
101
102
### Table Structure Components
103
104
Components for building table structure with proper accessibility and styling.
105
106
```typescript { .api }
107
interface TableHeaderProps<T = object> {
108
/** Header columns */
109
children?: React.ReactNode;
110
/** Columns data for dynamic rendering */
111
columns?: T[];
112
/** Custom CSS class */
113
className?: string;
114
}
115
116
interface TableBodyProps<T = object> {
117
/** Table rows */
118
children?: React.ReactNode;
119
/** Items data for dynamic rendering */
120
items?: T[];
121
/** Loading state */
122
isLoading?: boolean;
123
/** Loading content */
124
loadingContent?: React.ReactNode;
125
/** Empty state content */
126
emptyContent?: React.ReactNode;
127
/** Custom CSS class */
128
className?: string;
129
}
130
131
interface TableColumnProps {
132
/** Column content */
133
children?: React.ReactNode;
134
/** Column key identifier */
135
key?: React.Key;
136
/** Whether column allows sorting */
137
allowsSorting?: boolean;
138
/** Column alignment */
139
align?: "start" | "center" | "end";
140
/** Whether to hide header text */
141
hideHeader?: boolean;
142
/** Column width */
143
width?: string | number;
144
/** Minimum column width */
145
minWidth?: string | number;
146
/** Maximum column width */
147
maxWidth?: string | number;
148
/** Custom CSS class */
149
className?: string;
150
}
151
152
interface TableRowProps<T = object> {
153
/** Row content */
154
children?: React.ReactNode;
155
/** Row key identifier */
156
key?: React.Key;
157
/** Whether row has action */
158
href?: string;
159
/** Custom CSS class */
160
className?: string;
161
}
162
163
interface TableCellProps {
164
/** Cell content */
165
children?: React.ReactNode;
166
/** Cell alignment */
167
align?: "start" | "center" | "end";
168
/** Custom CSS class */
169
className?: string;
170
}
171
172
function TableHeader<T = object>(props: TableHeaderProps<T>): JSX.Element;
173
function TableBody<T = object>(props: TableBodyProps<T>): JSX.Element;
174
function TableColumn(props: TableColumnProps): JSX.Element;
175
function TableRow<T = object>(props: TableRowProps<T>): JSX.Element;
176
function TableCell(props: TableCellProps): JSX.Element;
177
```
178
179
**Table Usage Example:**
180
181
```typescript
182
import {
183
Table, TableHeader, TableColumn, TableBody, TableRow, TableCell,
184
Button, Chip, User, Tooltip
185
} from "@nextui-org/react";
186
187
const users = [
188
{
189
id: 1,
190
name: "Tony Reichert",
191
role: "CEO",
192
team: "Management",
193
status: "active",
194
age: "29",
195
avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
196
email: "tony.reichert@example.com",
197
},
198
// ... more users
199
];
200
201
const statusColorMap = {
202
active: "success",
203
paused: "danger",
204
vacation: "warning",
205
};
206
207
function UsersTable() {
208
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
209
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
210
column: "name",
211
direction: "ascending",
212
});
213
214
const renderCell = useCallback((user: User, columnKey: React.Key) => {
215
const cellValue = user[columnKey as keyof User];
216
217
switch (columnKey) {
218
case "name":
219
return (
220
<User
221
avatarProps={{radius: "lg", src: user.avatar}}
222
description={user.email}
223
name={cellValue}
224
>
225
{user.email}
226
</User>
227
);
228
case "role":
229
return (
230
<div className="flex flex-col">
231
<p className="text-bold text-sm capitalize">{cellValue}</p>
232
<p className="text-bold text-sm capitalize text-default-400">{user.team}</p>
233
</div>
234
);
235
case "status":
236
return (
237
<Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
238
{cellValue}
239
</Chip>
240
);
241
case "actions":
242
return (
243
<div className="relative flex items-center gap-2">
244
<Tooltip content="Details">
245
<Button isIconOnly size="sm" variant="light">
246
<EyeIcon className="text-lg text-default-400" />
247
</Button>
248
</Tooltip>
249
<Tooltip content="Edit user">
250
<Button isIconOnly size="sm" variant="light">
251
<EditIcon className="text-lg text-default-400" />
252
</Button>
253
</Tooltip>
254
<Tooltip color="danger" content="Delete user">
255
<Button isIconOnly size="sm" variant="light">
256
<DeleteIcon className="text-lg text-danger" />
257
</Button>
258
</Tooltip>
259
</div>
260
);
261
default:
262
return cellValue;
263
}
264
}, []);
265
266
return (
267
<Table
268
aria-label="Users table with custom cells"
269
selectionMode="multiple"
270
selectedKeys={selectedKeys}
271
onSelectionChange={setSelectedKeys}
272
sortDescriptor={sortDescriptor}
273
onSortChange={setSortDescriptor}
274
classNames={{
275
wrapper: "min-h-[222px]",
276
}}
277
>
278
<TableHeader>
279
<TableColumn key="name" allowsSorting>NAME</TableColumn>
280
<TableColumn key="role" allowsSorting>ROLE</TableColumn>
281
<TableColumn key="status" allowsSorting>STATUS</TableColumn>
282
<TableColumn key="actions">ACTIONS</TableColumn>
283
</TableHeader>
284
<TableBody items={users}>
285
{(item) => (
286
<TableRow key={item.id}>
287
{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
288
</TableRow>
289
)}
290
</TableBody>
291
</Table>
292
);
293
}
294
```
295
296
### Table Utilities
297
298
```typescript { .api }
299
/**
300
* Utility function to get value by key from object
301
* @param obj - Source object
302
* @param key - Key path (supports dot notation)
303
* @returns Value at key path
304
*/
305
function getKeyValue<T extends Record<string, any>>(
306
obj: T,
307
key: keyof T | string
308
): any;
309
```
310
311
### Avatar
312
313
Profile image component with fallbacks, status indicators, and grouping capabilities.
314
315
```typescript { .api }
316
interface AvatarProps {
317
/** Avatar image source */
318
src?: string;
319
/** Alt text for image */
320
alt?: string;
321
/** Name for generating initials fallback */
322
name?: string;
323
/** Custom icon fallback */
324
icon?: React.ReactNode;
325
/** Custom fallback element */
326
fallback?: React.ReactNode;
327
/** Avatar size */
328
size?: "sm" | "md" | "lg";
329
/** Border radius */
330
radius?: "none" | "sm" | "md" | "lg" | "full";
331
/** Color theme */
332
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
333
/** Add border */
334
isBordered?: boolean;
335
/** Disabled state */
336
isDisabled?: boolean;
337
/** Focusable for accessibility */
338
isFocusable?: boolean;
339
/** Show fallback when image fails */
340
showFallback?: boolean;
341
/** Image element ref */
342
imgRef?: React.RefObject<HTMLImageElement>;
343
/** Custom CSS class */
344
className?: string;
345
/** Slot-based styling */
346
classNames?: SlotsToClasses<AvatarSlots>;
347
/** Click handler */
348
onClick?: () => void;
349
}
350
351
type AvatarSlots = "base" | "img" | "fallback" | "name" | "icon";
352
353
function Avatar(props: AvatarProps): JSX.Element;
354
355
/**
356
* Hook for Avatar state management
357
*/
358
function useAvatar(props: AvatarProps): {
359
Component: React.ElementType;
360
slots: Record<AvatarSlots, string>;
361
classNames: SlotsToClasses<AvatarSlots>;
362
src?: string;
363
alt?: string;
364
name?: string;
365
showFallback: boolean;
366
getAvatarProps: () => any;
367
getImageProps: () => any;
368
};
369
```
370
371
### Avatar Group
372
373
Container for displaying multiple avatars with overlap and count indicators.
374
375
```typescript { .api }
376
interface AvatarGroupProps {
377
/** Avatar components */
378
children?: React.ReactNode;
379
/** Maximum avatars to show */
380
max?: number;
381
/** Avatar size (applies to all) */
382
size?: "sm" | "md" | "lg";
383
/** Color theme (applies to all) */
384
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
385
/** Border radius (applies to all) */
386
radius?: "none" | "sm" | "md" | "lg" | "full";
387
/** Add borders (applies to all) */
388
isBordered?: boolean;
389
/** Disabled state (applies to all) */
390
isDisabled?: boolean;
391
/** Grid layout instead of overlap */
392
isGrid?: boolean;
393
/** Total count for +N indicator */
394
total?: number;
395
/** Custom remaining count renderer */
396
renderCount?: (count: number) => React.ReactNode;
397
/** Custom CSS class */
398
className?: string;
399
/** Slot-based styling */
400
classNames?: SlotsToClasses<AvatarGroupSlots>;
401
}
402
403
type AvatarGroupSlots = "base" | "count";
404
405
function AvatarGroup(props: AvatarGroupProps): JSX.Element;
406
407
/**
408
* Hook for AvatarGroup state management
409
*/
410
function useAvatarGroup(props: AvatarGroupProps): {
411
Component: React.ElementType;
412
slots: Record<AvatarGroupSlots, string>;
413
classNames: SlotsToClasses<AvatarGroupSlots>;
414
remainingCount: number;
415
getAvatarGroupProps: () => any;
416
getCountProps: () => any;
417
};
418
```
419
420
**Avatar Usage Examples:**
421
422
```typescript
423
import { Avatar, AvatarGroup, AvatarIcon } from "@nextui-org/react";
424
425
function AvatarExamples() {
426
return (
427
<div className="space-y-6">
428
{/* Individual avatars */}
429
<div className="flex gap-4 items-center">
430
<Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
431
<Avatar name="Jane Doe" />
432
<Avatar
433
icon={<AvatarIcon />}
434
classNames={{
435
base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
436
icon: "text-black/80",
437
}}
438
/>
439
<Avatar isBordered color="primary" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
440
</div>
441
442
{/* Avatar group */}
443
<AvatarGroup
444
isBordered
445
max={3}
446
total={10}
447
renderCount={(count) => (
448
<p className="text-small text-foreground font-medium ms-2">+{count} others</p>
449
)}
450
>
451
<Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
452
<Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
453
<Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
454
<Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
455
<Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
456
</AvatarGroup>
457
</div>
458
);
459
}
460
```
461
462
### Avatar Context
463
464
Context system for sharing avatar group configuration.
465
466
```typescript { .api }
467
interface AvatarGroupProviderProps {
468
children: React.ReactNode;
469
value: AvatarGroupContextValue;
470
}
471
472
interface AvatarGroupContextValue {
473
size?: "sm" | "md" | "lg";
474
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
475
radius?: "none" | "sm" | "md" | "lg" | "full";
476
isBordered?: boolean;
477
isDisabled?: boolean;
478
isGrid?: boolean;
479
}
480
481
const AvatarGroupProvider: React.FC<AvatarGroupProviderProps>;
482
483
/**
484
* Hook to access avatar group context
485
*/
486
function useAvatarGroupContext(): AvatarGroupContextValue | undefined;
487
```
488
489
### Badge
490
491
Notification indicator component for displaying counts, status, or labels.
492
493
```typescript { .api }
494
interface BadgeProps {
495
/** Badge content (number, text, etc.) */
496
children?: React.ReactNode;
497
/** Badge content */
498
content?: React.ReactNode | number;
499
/** Badge color theme */
500
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
501
/** Badge size */
502
size?: "sm" | "md" | "lg";
503
/** Badge variant */
504
variant?: "solid" | "flat" | "faded" | "shadow";
505
/** Badge shape */
506
shape?: "circle" | "rectangle";
507
/** Badge placement on target */
508
placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
509
/** Whether badge is invisible */
510
isInvisible?: boolean;
511
/** Whether to show border */
512
showOutline?: boolean;
513
/** Disable animations */
514
disableAnimation?: boolean;
515
/** Whether badge is one character */
516
isOneChar?: boolean;
517
/** Whether badge is dot style */
518
isDot?: boolean;
519
/** Custom CSS class */
520
className?: string;
521
/** Slot-based styling */
522
classNames?: SlotsToClasses<BadgeSlots>;
523
}
524
525
type BadgeSlots = "base" | "badge";
526
527
function Badge(props: BadgeProps): JSX.Element;
528
529
/**
530
* Hook for Badge state management
531
*/
532
function useBadge(props: BadgeProps): {
533
Component: React.ElementType;
534
slots: Record<BadgeSlots, string>;
535
classNames: SlotsToClasses<BadgeSlots>;
536
getBadgeProps: () => any;
537
getBaseProps: () => any;
538
};
539
```
540
541
**Badge Usage Examples:**
542
543
```typescript
544
import { Badge, Button, Avatar } from "@nextui-org/react";
545
546
function BadgeExamples() {
547
return (
548
<div className="space-y-4">
549
{/* Badge on button */}
550
<Badge color="danger" content={5}>
551
<Button variant="bordered">Notifications</Button>
552
</Badge>
553
554
{/* Badge on avatar */}
555
<Badge
556
color="success"
557
content=""
558
isDot
559
placement="bottom-right"
560
shape="circle"
561
>
562
<Avatar
563
radius="md"
564
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
565
/>
566
</Badge>
567
568
{/* Various badge styles */}
569
<div className="flex gap-4">
570
<Badge content="99+" color="danger" shape="circle">
571
<Button variant="bordered">Messages</Button>
572
</Badge>
573
574
<Badge content="New" color="primary" variant="shadow">
575
<Button variant="bordered">Feature</Button>
576
</Badge>
577
</div>
578
</div>
579
);
580
}
581
```
582
583
### Chip
584
585
Compact elements for displaying tags, categories, or selected options with optional actions.
586
587
```typescript { .api }
588
interface ChipProps {
589
/** Chip content */
590
children?: React.ReactNode;
591
/** Chip variant */
592
variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "dot";
593
/** Chip color theme */
594
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
595
/** Chip size */
596
size?: "sm" | "md" | "lg";
597
/** Border radius */
598
radius?: "none" | "sm" | "md" | "lg" | "full";
599
/** Avatar element */
600
avatar?: React.ReactNode;
601
/** Start content (icon, etc.) */
602
startContent?: React.ReactNode;
603
/** End content (icon, etc.) */
604
endContent?: React.ReactNode;
605
/** Close button */
606
onClose?: () => void;
607
/** Whether chip is disabled */
608
isDisabled?: boolean;
609
/** Whether chip is closeable */
610
isCloseButtonFocusVisible?: boolean;
611
/** Custom CSS class */
612
className?: string;
613
/** Slot-based styling */
614
classNames?: SlotsToClasses<ChipSlots>;
615
}
616
617
type ChipSlots = "base" | "content" | "dot" | "avatar" | "closeButton";
618
619
function Chip(props: ChipProps): JSX.Element;
620
621
/**
622
* Hook for Chip state management
623
*/
624
function useChip(props: ChipProps): {
625
Component: React.ElementType;
626
slots: Record<ChipSlots, string>;
627
classNames: SlotsToClasses<ChipSlots>;
628
hasStartContent: boolean;
629
hasEndContent: boolean;
630
hasCloseButton: boolean;
631
getChipProps: () => any;
632
getContentProps: () => any;
633
getCloseButtonProps: () => any;
634
};
635
```
636
637
**Chip Usage Examples:**
638
639
```typescript
640
import { Chip, Avatar } from "@nextui-org/react";
641
import { CheckIcon } from "@heroicons/react/24/solid";
642
643
function ChipExamples() {
644
return (
645
<div className="space-y-4">
646
{/* Basic chips */}
647
<div className="flex gap-2">
648
<Chip>Default</Chip>
649
<Chip color="primary">Primary</Chip>
650
<Chip color="secondary">Secondary</Chip>
651
<Chip color="success" variant="shadow">Success</Chip>
652
</div>
653
654
{/* Chips with content */}
655
<div className="flex gap-2">
656
<Chip
657
variant="flat"
658
color="success"
659
startContent={<CheckIcon />}
660
>
661
Verified
662
</Chip>
663
664
<Chip
665
variant="flat"
666
color="primary"
667
avatar={
668
<Avatar
669
name="JW"
670
size="sm"
671
getInitials={(name) => name.charAt(0)}
672
/>
673
}
674
>
675
John Wilson
676
</Chip>
677
</div>
678
679
{/* Closeable chips */}
680
<div className="flex gap-2">
681
<Chip
682
onClose={() => console.log("close")}
683
variant="flat"
684
>
685
Closeable
686
</Chip>
687
688
<Chip
689
onClose={() => console.log("close")}
690
variant="bordered"
691
color="danger"
692
>
693
Remove
694
</Chip>
695
</div>
696
</div>
697
);
698
}
699
```
700
701
### Code
702
703
Inline code display component with syntax highlighting support and copy functionality.
704
705
```typescript { .api }
706
interface CodeProps {
707
/** Code content */
708
children?: React.ReactNode;
709
/** Code size */
710
size?: "sm" | "md" | "lg";
711
/** Code color theme */
712
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
713
/** Border radius */
714
radius?: "none" | "sm" | "md" | "lg" | "full";
715
/** Disable animations */
716
disableAnimation?: boolean;
717
/** Custom CSS class */
718
className?: string;
719
}
720
721
function Code(props: CodeProps): JSX.Element;
722
723
/**
724
* Hook for Code state management
725
*/
726
function useCode(props: CodeProps): {
727
Component: React.ElementType;
728
getCodeProps: () => any;
729
};
730
```
731
732
**Code Usage Example:**
733
734
```typescript
735
import { Code } from "@nextui-org/react";
736
737
function CodeExample() {
738
return (
739
<div className="space-y-2">
740
<p>
741
Install the package by running{" "}
742
<Code color="primary">npm install @nextui-org/react</Code>
743
</p>
744
745
<p>
746
Then import the component:{" "}
747
<Code size="sm">
748
import {Button} from "@nextui-org/react"
749
</Code>
750
</p>
751
</div>
752
);
753
}
754
```
755
756
### Image
757
758
Enhanced image component with loading states, zoom functionality, and fallback support.
759
760
```typescript { .api }
761
interface ImageProps {
762
/** Image source URL */
763
src?: string;
764
/** Alternative text */
765
alt?: string;
766
/** Image width */
767
width?: number | string;
768
/** Image height */
769
height?: number | string;
770
/** Border radius */
771
radius?: "none" | "sm" | "md" | "lg" | "full";
772
/** Shadow intensity */
773
shadow?: "none" | "sm" | "md" | "lg";
774
/** Loading behavior */
775
loading?: "eager" | "lazy";
776
/** Remove wrapper */
777
removeWrapper?: boolean;
778
/** Zoom on hover */
779
isZoomed?: boolean;
780
/** Blur placeholder */
781
isBlurred?: boolean;
782
/** Fallback element */
783
fallbackSrc?: string;
784
/** Custom CSS class */
785
className?: string;
786
/** Slot-based styling */
787
classNames?: SlotsToClasses<ImageSlots>;
788
/** Load event handler */
789
onLoad?: () => void;
790
/** Error event handler */
791
onError?: () => void;
792
}
793
794
type ImageSlots = "wrapper" | "zoomedWrapper" | "img" | "fallback" | "blurredImg";
795
796
function Image(props: ImageProps): JSX.Element;
797
798
/**
799
* Hook for Image state management
800
*/
801
function useImage(props: ImageProps): {
802
Component: React.ElementType;
803
slots: Record<ImageSlots, string>;
804
classNames: SlotsToClasses<ImageSlots>;
805
isLoaded: boolean;
806
showFallback: boolean;
807
getImageProps: () => any;
808
getWrapperProps: () => any;
809
getBlurredImageProps: () => any;
810
};
811
```
812
813
**Image Usage Examples:**
814
815
```typescript
816
import { Image } from "@nextui-org/react";
817
818
function ImageExamples() {
819
return (
820
<div className="space-y-4">
821
{/* Basic image */}
822
<Image
823
width={300}
824
height={200}
825
alt="NextUI hero"
826
src="https://nextui.org/images/hero-card-complete.jpeg"
827
/>
828
829
{/* Zoomed image */}
830
<Image
831
isZoomed
832
width={240}
833
height={240}
834
alt="NextUI Fruit Image with Zoom"
835
src="https://nextui.org/images/fruit-1.jpeg"
836
/>
837
838
{/* Blurred image */}
839
<Image
840
isBlurred
841
width={240}
842
height={240}
843
src="https://nextui.org/images/fruit-2.jpeg"
844
alt="NextUI Album Cover"
845
classNames={{
846
img: "object-cover",
847
}}
848
/>
849
</div>
850
);
851
}
852
```
853
854
### User
855
856
Specialized component for displaying user profile information with avatar and details.
857
858
```typescript { .api }
859
interface UserProps {
860
/** User name */
861
name?: React.ReactNode;
862
/** User description/subtitle */
863
description?: React.ReactNode;
864
/** User avatar image */
865
avatarSrc?: string;
866
/** Avatar props */
867
avatarProps?: Partial<AvatarProps>;
868
/** Custom CSS class */
869
className?: string;
870
/** Slot-based styling */
871
classNames?: SlotsToClasses<UserSlots>;
872
}
873
874
type UserSlots = "base" | "wrapper" | "name" | "description";
875
876
function User(props: UserProps): JSX.Element;
877
878
/**
879
* Hook for User state management
880
*/
881
function useUser(props: UserProps): {
882
Component: React.ElementType;
883
slots: Record<UserSlots, string>;
884
classNames: SlotsToClasses<UserSlots>;
885
getUserProps: () => any;
886
getWrapperProps: () => any;
887
getNameProps: () => any;
888
getDescriptionProps: () => any;
889
getAvatarProps: () => any;
890
};
891
```
892
893
**User Usage Example:**
894
895
```typescript
896
import { User } from "@nextui-org/react";
897
898
function UserExample() {
899
return (
900
<User
901
name="Jane Doe"
902
description="Product Designer"
903
avatarProps={{
904
src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
905
size: "sm"
906
}}
907
/>
908
);
909
}
910
```
911
912
## Data Display Component Types
913
914
```typescript { .api }
915
// Common data display types
916
type DataDisplaySize = "sm" | "md" | "lg";
917
type DataDisplayColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
918
type DataDisplayRadius = "none" | "sm" | "md" | "lg" | "full";
919
920
// Table specific types
921
interface TableState<T> {
922
collection: Collection<Node<T>>;
923
showSelectionCheckboxes: boolean;
924
selectionManager: SelectionManager;
925
sortDescriptor: SortDescriptor;
926
isHeaderSticky: boolean;
927
isEmpty: boolean;
928
isLoading: boolean;
929
}
930
931
// Selection types
932
interface SelectionManager {
933
selectedKeys: Selection;
934
isEmpty: boolean;
935
isSelectAll: boolean;
936
firstSelectedKey: React.Key | null;
937
lastSelectedKey: React.Key | null;
938
select(key: React.Key): void;
939
selectAll(): void;
940
deselect(key: React.Key): void;
941
clearSelection(): void;
942
toggle(key: React.Key): void;
943
replaceSelection(key: React.Key): void;
944
extendSelection(key: React.Key): void;
945
}
946
947
// Avatar types
948
interface AvatarState {
949
src?: string;
950
alt?: string;
951
name?: string;
952
showFallback: boolean;
953
isLoading: boolean;
954
hasError: boolean;
955
}
956
957
// Badge types
958
interface BadgeState {
959
content?: React.ReactNode | number;
960
isInvisible: boolean;
961
isDot: boolean;
962
isOneChar: boolean;
963
}
964
965
// Image types
966
interface ImageState {
967
src?: string;
968
isLoaded: boolean;
969
hasError: boolean;
970
showFallback: boolean;
971
isZoomed: boolean;
972
isBlurred: boolean;
973
}
974
```