Gallery
A responsive grid-based component for displaying images or media in an organized gallery layout.
lucide-react swiper
1import {
2 Gallery,
3 GalleryImage,
4 GalleryItem,
5} from '@/components/ui/gallery'
6
7const imagesData = [
8 {
9 src: '/images/random-image/random-1.jpg',
10 alt: 'Random 1',
11 },
12 {
13 src: '/images/random-image/random-2.jpg',
14 alt: 'Random 2',
15 },
16 {
17 src: '/images/random-image/random-3.jpg',
18 alt: 'Random 3',
19 },
20 {
21 src: '/images/random-image/random-4.jpg',
22 alt: 'Random 4',
23 },
24 {
25 src: '/images/random-image/random-5.jpg',
26 alt: 'Random 5',
27 },
28 {
29 src: '/images/random-image/random-6.jpg',
30 alt: 'Random 6',
31 },
32 {
33 src: '/images/random-image/random-7.jpg',
34 alt: 'Random 7',
35 },
36 {
37 src: '/images/random-image/random-8.jpg',
38 alt: 'Random 8',
39 },
40 {
41 src: '/images/random-image/random-9.jpg',
42 alt: 'Random 9',
43 },
44 {
45 src: '/images/random-image/random-10.jpg',
46 alt: 'Random 10',
47 },
48 {
49 src: '/images/random-image/random-11.jpg',
50 alt: 'Random 11',
51 },
52 {
53 src: '/images/random-image/random-12.jpg',
54 alt: 'Random 12',
55 },
56]
57
58export function GalleryDemo() {
59 return (
60 <Gallery className="w-md">
61 {imagesData.map((item) => (
62 <GalleryItem key={item.alt}>
63 <GalleryImage
64 src={item.src}
65 alt={item.alt}
66 width={1200}
67 height={1200}
68 />
69 </GalleryItem>
70 ))}
71 </Gallery>
72 )
73}
74Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes.com/r/gallery.json
Examples
Woven Images
1import {
2 Gallery,
3 GalleryImage,
4 GalleryItem,
5} from '@/components/ui/gallery'
6
7const imagesData = [
8 {
9 src: '/images/random-image/random-1.jpg',
10 alt: 'Random 1',
11 },
12 {
13 src: '/images/random-image/random-2.jpg',
14 alt: 'Random 2',
15 },
16 {
17 src: '/images/random-image/random-3.jpg',
18 alt: 'Random 3',
19 },
20 {
21 src: '/images/random-image/random-4.jpg',
22 alt: 'Random 4',
23 },
24 {
25 src: '/images/random-image/random-5.jpg',
26 alt: 'Random 5',
27 },
28 {
29 src: '/images/random-image/random-6.jpg',
30 alt: 'Random 6',
31 },
32 {
33 src: '/images/random-image/random-7.jpg',
34 alt: 'Random 7',
35 },
36 {
37 src: '/images/random-image/random-8.jpg',
38 alt: 'Random 8',
39 },
40 {
41 src: '/images/random-image/random-9.jpg',
42 alt: 'Random 9',
43 },
44 {
45 src: '/images/random-image/random-10.jpg',
46 alt: 'Random 10',
47 },
48 {
49 src: '/images/random-image/random-11.jpg',
50 alt: 'Random 11',
51 },
52 {
53 src: '/images/random-image/random-12.jpg',
54 alt: 'Random 12',
55 },
56]
57
58export function GalleryWovenDemo() {
59 return (
60 <Gallery variant="woven" width={500} height={500}>
61 {imagesData.map((item) => (
62 <GalleryItem key={item.alt}>
63 <GalleryImage
64 src={item.src}
65 alt={item.alt}
66 width={300}
67 height={300}
68 />
69 </GalleryItem>
70 ))}
71 </Gallery>
72 )
73}
74Slider
1import React from 'react'
2
3import {
4 Gallery,
5 GalleryImage,
6 GalleryItem,
7} from '@/components/ui/gallery'
8
9const imagesData = [
10 { src: '/images/random-image/random-2.jpg', alt: 'Random 2' },
11 { src: '/images/random-image/random-3.jpg', alt: 'Random 3' },
12 { src: '/images/random-image/random-4.jpg', alt: 'Random 4' },
13 { src: '/images/random-image/random-5.jpg', alt: 'Random 5' },
14 { src: '/images/random-image/random-6.jpg', alt: 'Random 6' },
15 { src: '/images/random-image/random-7.jpg', alt: 'Random 7' },
16 { src: '/images/random-image/random-9.jpg', alt: 'Random 9' },
17]
18
19export function GallerySliderDemo() {
20 return (
21 <Gallery variant="slider">
22 {imagesData.map((item) => (
23 <GalleryItem key={item.alt}>
24 <GalleryImage
25 src={item.src}
26 alt={item.alt}
27 width={400}
28 height={400}
29 className="aspect-[4/3]!"
30 />
31 </GalleryItem>
32 ))}
33 </Gallery>
34 )
35}
36Title (Top)
Random 1
Random Author
Random 2
Random Author
Random 3
Random Author
Random 4
Random Author
Random 5
Random Author
Random 6
Random Author
Random 7
Random Author
Random 8
Random Author
Random 9
Random Author
Random 10
Random Author
Random 11
Random Author
Random 12
Random Author
1import {
2 Gallery,
3 GalleryImage,
4 GalleryItem,
5 GalleryItemBar,
6} from '@/components/ui/gallery'
7
8const imagesData = [
9 {
10 src: '/images/random-image/random-1.jpg',
11 alt: 'Random 1',
12 title: 'Random 1',
13 author: 'Random Author',
14 },
15 {
16 src: '/images/random-image/random-2.jpg',
17 alt: 'Random 2',
18 title: 'Random 2',
19 author: 'Random Author',
20 },
21 {
22 src: '/images/random-image/random-3.jpg',
23 alt: 'Random 3',
24 title: 'Random 3',
25 author: 'Random Author',
26 },
27 {
28 src: '/images/random-image/random-4.jpg',
29 alt: 'Random 4',
30 title: 'Random 4',
31 author: 'Random Author',
32 },
33 {
34 src: '/images/random-image/random-5.jpg',
35 alt: 'Random 5',
36 title: 'Random 5',
37 author: 'Random Author',
38 },
39 {
40 src: '/images/random-image/random-6.jpg',
41 alt: 'Random 6',
42 title: 'Random 6',
43 author: 'Random Author',
44 },
45 {
46 src: '/images/random-image/random-7.jpg',
47 alt: 'Random 7',
48 title: 'Random 7',
49 author: 'Random Author',
50 },
51 {
52 src: '/images/random-image/random-8.jpg',
53 alt: 'Random 8',
54 title: 'Random 8',
55 author: 'Random Author',
56 },
57 {
58 src: '/images/random-image/random-9.jpg',
59 alt: 'Random 9',
60 title: 'Random 9',
61 author: 'Random Author',
62 },
63 {
64 src: '/images/random-image/random-10.jpg',
65 alt: 'Random 10',
66 title: 'Random 10',
67 author: 'Random Author',
68 },
69 {
70 src: '/images/random-image/random-11.jpg',
71 alt: 'Random 11',
72 title: 'Random 11',
73 author: 'Random Author',
74 },
75 {
76 src: '/images/random-image/random-12.jpg',
77 alt: 'Random 12',
78 title: 'Random 12',
79 author: 'Random Author',
80 },
81]
82
83export function GalleryTitleTop() {
84 return (
85 <Gallery className="w-md">
86 {imagesData.map((item) => (
87 <GalleryItem key={item.alt}>
88 <GalleryImage
89 src={item.src}
90 alt={item.alt}
91 width={1200}
92 height={1200}
93 />
94 <GalleryItemBar
95 title={item.title}
96 subtitle={item.author}
97 position="top"
98 />
99 </GalleryItem>
100 ))}
101 </Gallery>
102 )
103}
104Title (Below)
Random 1
Random Author
Random 2
Random Author
Random 3
Random Author
Random 4
Random Author
Random 5
Random Author
Random 6
Random Author
Random 7
Random Author
Random 8
Random Author
Random 9
Random Author
Random 10
Random Author
Random 11
Random Author
Random 12
Random Author
1import {
2 Gallery,
3 GalleryImage,
4 GalleryItem,
5 GalleryItemBar,
6} from '@/components/ui/gallery'
7
8const imagesData = [
9 {
10 src: '/images/random-image/random-1.jpg',
11 alt: 'Random 1',
12 title: 'Random 1',
13 author: 'Random Author',
14 },
15 {
16 src: '/images/random-image/random-2.jpg',
17 alt: 'Random 2',
18 title: 'Random 2',
19 author: 'Random Author',
20 },
21 {
22 src: '/images/random-image/random-3.jpg',
23 alt: 'Random 3',
24 title: 'Random 3',
25 author: 'Random Author',
26 },
27 {
28 src: '/images/random-image/random-4.jpg',
29 alt: 'Random 4',
30 title: 'Random 4',
31 author: 'Random Author',
32 },
33 {
34 src: '/images/random-image/random-5.jpg',
35 alt: 'Random 5',
36 title: 'Random 5',
37 author: 'Random Author',
38 },
39 {
40 src: '/images/random-image/random-6.jpg',
41 alt: 'Random 6',
42 title: 'Random 6',
43 author: 'Random Author',
44 },
45 {
46 src: '/images/random-image/random-7.jpg',
47 alt: 'Random 7',
48 title: 'Random 7',
49 author: 'Random Author',
50 },
51 {
52 src: '/images/random-image/random-8.jpg',
53 alt: 'Random 8',
54 title: 'Random 8',
55 author: 'Random Author',
56 },
57 {
58 src: '/images/random-image/random-9.jpg',
59 alt: 'Random 9',
60 title: 'Random 9',
61 author: 'Random Author',
62 },
63 {
64 src: '/images/random-image/random-10.jpg',
65 alt: 'Random 10',
66 title: 'Random 10',
67 author: 'Random Author',
68 },
69 {
70 src: '/images/random-image/random-11.jpg',
71 alt: 'Random 11',
72 title: 'Random 11',
73 author: 'Random Author',
74 },
75 {
76 src: '/images/random-image/random-12.jpg',
77 alt: 'Random 12',
78 title: 'Random 12',
79 author: 'Random Author',
80 },
81]
82
83export function GalleryTitleBelow() {
84 return (
85 <Gallery className="w-md">
86 {imagesData.map((item) => (
87 <GalleryItem key={item.alt}>
88 <GalleryImage
89 src={item.src}
90 alt={item.alt}
91 width={1200}
92 height={1200}
93 />
94 <GalleryItemBar
95 title={item.title}
96 subtitle={item.author}
97 position="below"
98 className="bg-gray text-white"
99 />
100 </GalleryItem>
101 ))}
102 </Gallery>
103 )
104}
105API Reference
Gallery
| Prop | Type | Default |
|---|---|---|
| variant | standard, woven, slider | standard |
| children | React.ReactNode | - |
GalleryItem
| Prop | Type | Default |
|---|---|---|
| children | React.ReactNode | - |
GalleryImage
| Prop | Type | Default |
|---|---|---|
| src | string | - |
| alt | string | - |
| width | number | - |
| height | number | - |
| className | string | - |
| imageClassName | string | - |
GalleryItemBar
| Prop | Type | Default |
|---|---|---|
| title | string | - |
| subtitle | string | - |
| actionIcon | React.ReactNode | - |
| position | top, bottom, below | bottom |
On This Page