ComponentsPage
Page
The Page structure helps users to easily identify where they are, view content essential to the main job, and perform related actions.
Muted
Base
Products
Name
Description
Brand
Category
iPhone 15
A nice phone
Apple
smartphones
Aventador SVJ
Good italian car
Lamborghini
cars
Uno with stair
Fastest car on earth
Fiat
cars
import {
Page,
PageContent,
PageHeader,
PageHeading,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
Tag,
} from '@vtex/shoreline'
export default function Example() {
return (
<Page>
<PageHeader>
<PageHeading>Products</PageHeading>
</PageHeader>
<PageContent>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Brand</TableHeaderCell>
<TableHeaderCell>Category</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>iPhone 15</TableCell>
<TableCell>A nice phone</TableCell>
<TableCell>Apple</TableCell>
<TableCell>
<Tag variant="secondary">smartphones</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Aventador SVJ</TableCell>
<TableCell>Good italian car</TableCell>
<TableCell>Lamborghini</TableCell>
<TableCell>
<Tag variant="secondary" color="cyan">
cars
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Uno with stair</TableCell>
<TableCell>Fastest car on earth</TableCell>
<TableCell>Fiat</TableCell>
<TableCell>
<Tag variant="secondary" color="cyan">
cars
</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</PageContent>
</Page>
)
}
Examples
With tabs
Muted
Base
Page with Tabs
1 — 25 of 74
Product
Description
Brand
Category
iPhone 15
Latest model smartphone
Apple
Electronics
MacBook Pro
Powerful laptop for professionals
Apple
Electronics
1 — 25 of 74
Category
Products Count
Status
Electronics
235
Active
Clothing
512
Active
Home & Garden
189
Active
Metric
Today
Last Week
Change
Sessions
5,324
4,981
+6.8%
Conversions
189
165
+14.5%
Revenue
$12,450
$11,280
+10.4%
import {
Page,
PageContent,
PageHeader,
PageHeaderRow,
PageHeading,
Tab,
TabProvider,
TabList,
TabPanel,
Collection,
CollectionRow,
CollectionView,
Pagination,
Search,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
Tag,
} from '@vtex/shoreline'
export default function Example() {
return (
<Page>
<TabProvider>
<PageHeader>
<PageHeaderRow>
<PageHeading>Page with Tabs</PageHeading>
</PageHeaderRow>
<PageHeaderRow>
<TabList>
<Tab>Products</Tab>
<Tab>Categories</Tab>
<Tab>Analytics</Tab>
</TabList>
</PageHeaderRow>
</PageHeader>
<PageContent layout="standard">
<TabPanel>
<Collection>
<CollectionRow>
<Search />
<Pagination page={1} total={74} />
</CollectionRow>
<CollectionView status="ready">
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Product</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Brand</TableHeaderCell>
<TableHeaderCell>Category</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>iPhone 15</TableCell>
<TableCell>Latest model smartphone</TableCell>
<TableCell>Apple</TableCell>
<TableCell>
<Tag variant="secondary">Electronics</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>MacBook Pro</TableCell>
<TableCell>Powerful laptop for professionals</TableCell>
<TableCell>Apple</TableCell>
<TableCell>
<Tag variant="secondary">Electronics</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CollectionView>
<CollectionRow align="flex-end">
<Pagination page={1} total={74} />
</CollectionRow>
</Collection>
</TabPanel>
<TabPanel>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Category</TableHeaderCell>
<TableHeaderCell>Products Count</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Electronics</TableCell>
<TableCell>235</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Active
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Clothing</TableCell>
<TableCell>512</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Active
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Home & Garden</TableCell>
<TableCell>189</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Active
</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TabPanel>
<TabPanel>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Metric</TableHeaderCell>
<TableHeaderCell>Today</TableHeaderCell>
<TableHeaderCell>Last Week</TableHeaderCell>
<TableHeaderCell>Change</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Sessions</TableCell>
<TableCell>5,324</TableCell>
<TableCell>4,981</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
+6.8%
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Conversions</TableCell>
<TableCell>189</TableCell>
<TableCell>165</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
+14.5%
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Revenue</TableCell>
<TableCell>$12,450</TableCell>
<TableCell>$11,280</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
+10.4%
</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TabPanel>
</PageContent>
</TabProvider>
</Page>
)
}
With button
Muted
Base
Orders
1 — 25 of 42
Order ID
Customer
Date
Total
Status
#12345
John Smith
2023-05-15
$126.50
Delivered
#12346
Sarah Johnson
2023-05-16
$89.99
Shipped
#12347
Michael Brown
2023-05-16
$215.75
Processing
1 — 25 of 42
import {
Page,
PageContent,
PageHeader,
PageHeaderRow,
PageHeading,
Button,
Bleed,
Collection,
CollectionRow,
CollectionView,
Pagination,
Search,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
Tag,
} from '@vtex/shoreline'
export default function Example() {
return (
<Page>
<PageHeader>
<PageHeaderRow>
<PageHeading>Orders</PageHeading>
<Bleed top="$space-2" bottom="$space-2">
<Button variant="primary" size="large">
Create Order
</Button>
</Bleed>
</PageHeaderRow>
</PageHeader>
<PageContent>
<Collection>
<CollectionRow>
<Search messages={{ placeholder: 'Search orders...' }} />
<Pagination page={1} total={42} />
</CollectionRow>
<CollectionView status="ready">
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Order ID</TableHeaderCell>
<TableHeaderCell>Customer</TableHeaderCell>
<TableHeaderCell>Date</TableHeaderCell>
<TableHeaderCell>Total</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>#12345</TableCell>
<TableCell>John Smith</TableCell>
<TableCell>2023-05-15</TableCell>
<TableCell>$126.50</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Delivered
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>#12346</TableCell>
<TableCell>Sarah Johnson</TableCell>
<TableCell>2023-05-16</TableCell>
<TableCell>$89.99</TableCell>
<TableCell>
<Tag variant="secondary" color="blue">
Shipped
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>#12347</TableCell>
<TableCell>Michael Brown</TableCell>
<TableCell>2023-05-16</TableCell>
<TableCell>$215.75</TableCell>
<TableCell>
<Tag variant="secondary" color="yellow">
Processing
</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CollectionView>
<CollectionRow align="flex-end">
<Pagination page={1} total={42} />
</CollectionRow>
</Collection>
</PageContent>
</Page>
)
}
With back button and tag
Muted
Base
Product Details
Draft
Product Name
SKU
Brand
Price
Stock
Description
Categories
Premium Wireless Headphones
WH-1000XM5
Sony
$349.99
128 units
Industry-leading noise cancellation, exceptional sound quality with a lightweight design and comfortable fit for all-day listening.
Electronics
Audio
Headphones
Ultra HD Smart TV
QN90B-55
Samsung
$1,299.99
42 units
Neo QLED 4K display with mini-LED technology, powerful processor for upscaling, and immersive sound experience.
Electronics
TV
Home Theater
Professional Espresso Machine
BES870XL
Breville
$699.95
17 units
Precise espresso extraction with digital temperature control, integrated grinder, and microfoam milk texturing.
Appliances
Kitchen
Coffee
Ultralight Gaming Laptop
G15-RTX3080
ASUS
$2,199.00
23 units
High-performance gaming laptop with 15.6" 240Hz display, NVIDIA GeForce RTX 3080, and AMD Ryzen 9 processor.
Electronics
Computers
Gaming
import {
Page,
PageContent,
PageHeader,
PageHeaderRow,
PageHeading,
IconButton,
Bleed,
Tag,
Flex,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
IconArrowLeft,
} from '@vtex/shoreline'
export default function Example() {
return (
<Page>
<PageHeader>
<PageHeaderRow>
<Flex>
<Bleed top="$space-2" bottom="$space-2">
<IconButton
label="Return"
asChild
variant="tertiary"
size="large"
>
<IconArrowLeft />
</IconButton>
</Bleed>
<PageHeading>Product Details</PageHeading>
<Tag variant="secondary">Draft</Tag>
</Flex>
</PageHeaderRow>
</PageHeader>
<PageContent>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Product Name</TableHeaderCell>
<TableHeaderCell>SKU</TableHeaderCell>
<TableHeaderCell>Brand</TableHeaderCell>
<TableHeaderCell>Price</TableHeaderCell>
<TableHeaderCell>Stock</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Categories</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Premium Wireless Headphones</TableCell>
<TableCell>WH-1000XM5</TableCell>
<TableCell>Sony</TableCell>
<TableCell>$349.99</TableCell>
<TableCell>128 units</TableCell>
<TableCell>
Industry-leading noise cancellation, exceptional sound quality
with a lightweight design and comfortable fit for all-day
listening.
</TableCell>
<TableCell>
<Flex gap="$space-2">
<Tag variant="secondary">Electronics</Tag>
<Tag variant="secondary">Audio</Tag>
<Tag variant="secondary">Headphones</Tag>
</Flex>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Ultra HD Smart TV</TableCell>
<TableCell>QN90B-55</TableCell>
<TableCell>Samsung</TableCell>
<TableCell>$1,299.99</TableCell>
<TableCell>42 units</TableCell>
<TableCell>
Neo QLED 4K display with mini-LED technology, powerful processor
for upscaling, and immersive sound experience.
</TableCell>
<TableCell>
<Flex gap="$space-2">
<Tag variant="secondary">Electronics</Tag>
<Tag variant="secondary">TV</Tag>
<Tag variant="secondary">Home Theater</Tag>
</Flex>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Professional Espresso Machine</TableCell>
<TableCell>BES870XL</TableCell>
<TableCell>Breville</TableCell>
<TableCell>$699.95</TableCell>
<TableCell>17 units</TableCell>
<TableCell>
Precise espresso extraction with digital temperature control,
integrated grinder, and microfoam milk texturing.
</TableCell>
<TableCell>
<Flex gap="$space-2">
<Tag variant="secondary">Appliances</Tag>
<Tag variant="secondary">Kitchen</Tag>
<Tag variant="secondary">Coffee</Tag>
</Flex>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Ultralight Gaming Laptop</TableCell>
<TableCell>G15-RTX3080</TableCell>
<TableCell>ASUS</TableCell>
<TableCell>$2,199.00</TableCell>
<TableCell>23 units</TableCell>
<TableCell>
High-performance gaming laptop with 15.6" 240Hz display, NVIDIA
GeForce RTX 3080, and AMD Ryzen 9 processor.
</TableCell>
<TableCell>
<Flex gap="$space-2">
<Tag variant="secondary">Electronics</Tag>
<Tag variant="secondary">Computers</Tag>
<Tag variant="secondary">Gaming</Tag>
</Flex>
</TableCell>
</TableRow>
</TableBody>
</Table>
</PageContent>
</Page>
)
}
Narrow
Muted
Base
Account Settings
Full Name
Email Address
Phone Number
Jane Smith
jane.smith@example.com
+1 (555) 123-4567
John Doe
john.doe@example.com
+1 (555) 987-6543
Maria Garcia
maria.garcia@example.com
+1 (555) 456-7890
Alex Johnson
alex.johnson@example.com
+1 (555) 234-5678
Field
Value
Company Name
Acme Corporation
Position
Product Manager
Department
Marketing
Field
Value
Last Password Change
3 months ago
Two-Factor Authentication
Enabled
import {
Page,
PageContent,
PageHeader,
PageHeading,
Table,
TableBody,
TableCell,
TableHeaderCell,
TableRow,
TableHeader,
TabProvider,
TabList,
Tab,
TabPanel,
} from '@vtex/shoreline'
export default function Example() {
return (
<Page>
<PageHeader>
<PageHeading>Account Settings</PageHeading>
</PageHeader>
<TabProvider>
<PageContent layout="narrow">
<TabList>
<Tab>Personal Information</Tab>
<Tab>Company Details</Tab>
<Tab>Security</Tab>
</TabList>
<TabPanel>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Full Name</TableHeaderCell>
<TableHeaderCell>Email Address</TableHeaderCell>
<TableHeaderCell>Phone Number</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Jane Smith</TableCell>
<TableCell>jane.smith@example.com</TableCell>
<TableCell>+1 (555) 123-4567</TableCell>
</TableRow>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>john.doe@example.com</TableCell>
<TableCell>+1 (555) 987-6543</TableCell>
</TableRow>
<TableRow>
<TableCell>Maria Garcia</TableCell>
<TableCell>maria.garcia@example.com</TableCell>
<TableCell>+1 (555) 456-7890</TableCell>
</TableRow>
<TableRow>
<TableCell>Alex Johnson</TableCell>
<TableCell>alex.johnson@example.com</TableCell>
<TableCell>+1 (555) 234-5678</TableCell>
</TableRow>
</TableBody>
</Table>
</TabPanel>
<TabPanel>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Field</TableHeaderCell>
<TableHeaderCell>Value</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Company Name</TableCell>
<TableCell>Acme Corporation</TableCell>
</TableRow>
<TableRow>
<TableCell>Position</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
<TableRow>
<TableCell>Department</TableCell>
<TableCell>Marketing</TableCell>
</TableRow>
</TableBody>
</Table>
</TabPanel>
<TabPanel>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Field</TableHeaderCell>
<TableHeaderCell>Value</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Last Password Change</TableCell>
<TableCell>3 months ago</TableCell>
</TableRow>
<TableRow>
<TableCell>Two-Factor Authentication</TableCell>
<TableCell>Enabled</TableCell>
</TableRow>
</TableBody>
</Table>
</TabPanel>
</PageContent>
</TabProvider>
</Page>
)
}
Wide
Muted
Base
Inventory Dashboard
1 — 25 of 120
SKU
Product
Category
In Stock
Reserved
Available
Status
SKU12345
Wireless Headphones
Electronics
156
24
132
In Stock
SKU12346
Smartphone Case
Accessories
423
51
372
In Stock
SKU12347
Bluetooth Speaker
Electronics
89
35
54
In Stock
SKU12348
USB-C Cable
Accessories
278
42
236
In Stock
SKU12349
Wireless Mouse
Peripherals
12
10
2
Low Stock
SKU12350
External Hard Drive
Storage
0
0
0
Out of Stock
1 — 25 of 120
import {
Page,
PageContent,
PageHeader,
PageHeading,
Collection,
CollectionRow,
CollectionView,
Pagination,
Search,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
Tag,
} from '@vtex/shoreline'
export default function Example() {
return (
<Page>
<PageHeader>
<PageHeading>Inventory Dashboard</PageHeading>
</PageHeader>
<PageContent layout="wide">
<Collection>
<CollectionRow>
<Search messages={{ placeholder: 'Search products...' }} />
<Pagination page={1} total={120} />
</CollectionRow>
<CollectionView status="ready">
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>SKU</TableHeaderCell>
<TableHeaderCell>Product</TableHeaderCell>
<TableHeaderCell>Category</TableHeaderCell>
<TableHeaderCell>In Stock</TableHeaderCell>
<TableHeaderCell>Reserved</TableHeaderCell>
<TableHeaderCell>Available</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>SKU12345</TableCell>
<TableCell>Wireless Headphones</TableCell>
<TableCell>Electronics</TableCell>
<TableCell>156</TableCell>
<TableCell>24</TableCell>
<TableCell>132</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
In Stock
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>SKU12346</TableCell>
<TableCell>Smartphone Case</TableCell>
<TableCell>Accessories</TableCell>
<TableCell>423</TableCell>
<TableCell>51</TableCell>
<TableCell>372</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
In Stock
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>SKU12347</TableCell>
<TableCell>Bluetooth Speaker</TableCell>
<TableCell>Electronics</TableCell>
<TableCell>89</TableCell>
<TableCell>35</TableCell>
<TableCell>54</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
In Stock
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>SKU12348</TableCell>
<TableCell>USB-C Cable</TableCell>
<TableCell>Accessories</TableCell>
<TableCell>278</TableCell>
<TableCell>42</TableCell>
<TableCell>236</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
In Stock
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>SKU12349</TableCell>
<TableCell>Wireless Mouse</TableCell>
<TableCell>Peripherals</TableCell>
<TableCell>12</TableCell>
<TableCell>10</TableCell>
<TableCell>2</TableCell>
<TableCell>
<Tag variant="secondary" color="yellow">
Low Stock
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>SKU12350</TableCell>
<TableCell>External Hard Drive</TableCell>
<TableCell>Storage</TableCell>
<TableCell>0</TableCell>
<TableCell>0</TableCell>
<TableCell>0</TableCell>
<TableCell>
<Tag variant="secondary" color="red">
Out of Stock
</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CollectionView>
<CollectionRow align="flex-end">
<Pagination page={1} total={120} />
</CollectionRow>
</Collection>
</PageContent>
</Page>
)
}
Complex
Muted
Base
Campaign Analytics
Status: Active
18 of 18
Campaign
Status
Budget
Spend
Conversions
ROI
Summer Sale 2023
Active
$10,000
$7,849
256
3.2x
Back to School
Active
$5,000
$2,156
98
2.8x
Holiday Special
Scheduled
$15,000
$0
0
-
Spring Collection
Ended
$8,000
$8,000
315
3.9x
18 of 18
Metric
Today
Last Week
Last Month
Change
Click-through Rate
3.7%
3.2%
2.9%
+15.6%
Cost per Click
$0.42
$0.48
$0.51
-12.5%
Conversion Rate
2.8%
2.5%
2.3%
+12.0%
Avg. Order Value
$68.42
$65.19
$62.75
+4.9%
Demographic
Impressions
Clicks
Conversions
Conversion Rate
18-24 years
42,568
3,245
87
2.7%
25-34 years
78,912
6,789
216
3.2%
35-44 years
56,423
4,321
142
3.3%
45+ years
31,256
2,154
52
2.4%
import {
Page,
PageContent,
PageHeader,
PageHeaderRow,
PageHeading,
IconButton,
Bleed,
Button,
Tag,
Flex,
Stack,
Menu,
MenuItem,
Collection,
CollectionRow,
CollectionView,
Pagination,
Search,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
IconArrowLeft,
TabList,
Tab,
TabProvider,
TabPanel,
DrawerProvider,
DrawerPopover,
DrawerHeader,
DrawerHeading,
DrawerDismiss,
DrawerContent,
DrawerFooter,
Text,
Heading,
} from '@vtex/shoreline'
import { useState } from 'react'
export default function Example() {
const [drawerOpen, setDrawerOpen] = useState(false)
const handleCampaignDetailsClick = () => {
setDrawerOpen(true)
}
return (
<Page>
<TabProvider>
<PageHeader>
<PageHeaderRow>
<Flex>
<Bleed top="$space-2" bottom="$space-2">
<IconButton
label="Return"
asChild
variant="tertiary"
size="large"
>
<IconArrowLeft />
</IconButton>
</Bleed>
<PageHeading>Campaign Analytics</PageHeading>
<Tag variant="secondary">Status: Active</Tag>
</Flex>
<Stack space="$space-4" horizontal>
<Bleed top="$space-2" bottom="$space-2">
<Button variant="primary" size="large">
Save
</Button>
</Bleed>
<Bleed top="$space-2" bottom="$space-2">
<Menu label="Actions" type="actions" iconOnly size="large">
<MenuItem onClick={handleCampaignDetailsClick}>
Campaign Details
</MenuItem>
<MenuItem>Export Data</MenuItem>
<MenuItem>Generate Report</MenuItem>
<MenuItem>Share</MenuItem>
</Menu>
</Bleed>
</Stack>
</PageHeaderRow>
<PageHeaderRow>
<TabList>
<Tab>Overview</Tab>
<Tab>Performance</Tab>
<Tab>Audience</Tab>
</TabList>
</PageHeaderRow>
</PageHeader>
<PageContent layout="standard">
<TabPanel>
{/* Overview Tab */}
<Collection>
<CollectionRow>
<Search messages={{ placeholder: 'Search campaigns...' }} />
<Pagination page={1} total={18} />
</CollectionRow>
<CollectionView status="ready">
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Campaign</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
<TableHeaderCell>Budget</TableHeaderCell>
<TableHeaderCell>Spend</TableHeaderCell>
<TableHeaderCell>Conversions</TableHeaderCell>
<TableHeaderCell>ROI</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Summer Sale 2023</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Active
</Tag>
</TableCell>
<TableCell>$10,000</TableCell>
<TableCell>$7,849</TableCell>
<TableCell>256</TableCell>
<TableCell>3.2x</TableCell>
</TableRow>
<TableRow>
<TableCell>Back to School</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Active
</Tag>
</TableCell>
<TableCell>$5,000</TableCell>
<TableCell>$2,156</TableCell>
<TableCell>98</TableCell>
<TableCell>2.8x</TableCell>
</TableRow>
<TableRow>
<TableCell>Holiday Special</TableCell>
<TableCell>
<Tag variant="secondary" color="blue">
Scheduled
</Tag>
</TableCell>
<TableCell>$15,000</TableCell>
<TableCell>$0</TableCell>
<TableCell>0</TableCell>
<TableCell>-</TableCell>
</TableRow>
<TableRow>
<TableCell>Spring Collection</TableCell>
<TableCell>
<Tag variant="secondary" color="gray">
Ended
</Tag>
</TableCell>
<TableCell>$8,000</TableCell>
<TableCell>$8,000</TableCell>
<TableCell>315</TableCell>
<TableCell>3.9x</TableCell>
</TableRow>
</TableBody>
</Table>
</CollectionView>
<CollectionRow align="flex-end">
<Pagination page={1} total={18} />
</CollectionRow>
</Collection>
</TabPanel>
<TabPanel>
{/* Performance Tab */}
<Collection>
<CollectionView status="ready">
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Metric</TableHeaderCell>
<TableHeaderCell>Today</TableHeaderCell>
<TableHeaderCell>Last Week</TableHeaderCell>
<TableHeaderCell>Last Month</TableHeaderCell>
<TableHeaderCell>Change</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Click-through Rate</TableCell>
<TableCell>3.7%</TableCell>
<TableCell>3.2%</TableCell>
<TableCell>2.9%</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
+15.6%
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Cost per Click</TableCell>
<TableCell>$0.42</TableCell>
<TableCell>$0.48</TableCell>
<TableCell>$0.51</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
-12.5%
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Conversion Rate</TableCell>
<TableCell>2.8%</TableCell>
<TableCell>2.5%</TableCell>
<TableCell>2.3%</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
+12.0%
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Avg. Order Value</TableCell>
<TableCell>$68.42</TableCell>
<TableCell>$65.19</TableCell>
<TableCell>$62.75</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
+4.9%
</Tag>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CollectionView>
</Collection>
</TabPanel>
<TabPanel>
{/* Audience Tab */}
<Collection>
<CollectionView status="ready">
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableHeader>
<TableRow>
<TableHeaderCell>Demographic</TableHeaderCell>
<TableHeaderCell>Impressions</TableHeaderCell>
<TableHeaderCell>Clicks</TableHeaderCell>
<TableHeaderCell>Conversions</TableHeaderCell>
<TableHeaderCell>Conversion Rate</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>18-24 years</TableCell>
<TableCell>42,568</TableCell>
<TableCell>3,245</TableCell>
<TableCell>87</TableCell>
<TableCell>2.7%</TableCell>
</TableRow>
<TableRow>
<TableCell>25-34 years</TableCell>
<TableCell>78,912</TableCell>
<TableCell>6,789</TableCell>
<TableCell>216</TableCell>
<TableCell>3.2%</TableCell>
</TableRow>
<TableRow>
<TableCell>35-44 years</TableCell>
<TableCell>56,423</TableCell>
<TableCell>4,321</TableCell>
<TableCell>142</TableCell>
<TableCell>3.3%</TableCell>
</TableRow>
<TableRow>
<TableCell>45+ years</TableCell>
<TableCell>31,256</TableCell>
<TableCell>2,154</TableCell>
<TableCell>52</TableCell>
<TableCell>2.4%</TableCell>
</TableRow>
</TableBody>
</Table>
</CollectionView>
</Collection>
</TabPanel>
</PageContent>
</TabProvider>
{/* Campaign Details Drawer */}
<DrawerProvider open={drawerOpen} onOpenChange={setDrawerOpen}>
<DrawerPopover>
<DrawerHeader>
<DrawerHeading>Campaign Details</DrawerHeading>
<DrawerDismiss />
</DrawerHeader>
<DrawerContent>
<Stack space="$space-6">
<Stack space="$space-3">
<Heading level={2}>Summer Sale 2023</Heading>
<Table
columnWidths={[
'minmax(min-content, auto)',
'minmax(min-content, auto)',
]}
>
<TableBody>
<TableRow>
<TableCell>
<strong>Status</strong>
</TableCell>
<TableCell>
<Tag variant="secondary" color="green">
Active
</Tag>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<strong>Start Date</strong>
</TableCell>
<TableCell>June 1, 2023</TableCell>
</TableRow>
<TableRow>
<TableCell>
<strong>End Date</strong>
</TableCell>
<TableCell>August 31, 2023</TableCell>
</TableRow>
<TableRow>
<TableCell>
<strong>Target Audience</strong>
</TableCell>
<TableCell>25-45 years, Urban demographics</TableCell>
</TableRow>
<TableRow>
<TableCell>
<strong>Channels</strong>
</TableCell>
<TableCell>Email, Social Media, Display Ads</TableCell>
</TableRow>
<TableRow>
<TableCell>
<strong>Budget Allocation</strong>
</TableCell>
<TableCell>
$10,000 ($5,000 Social, $3,000 Display, $2,000 Email)
</TableCell>
</TableRow>
</TableBody>
</Table>
</Stack>
<Stack space="$space-3">
<Heading level={2}>Campaign Summary</Heading>
<Text>
Our Summer Sale 2023 campaign targets customers during the
peak summer shopping season. The campaign focuses on seasonal
products with discounts ranging from 20-50% off. So far, it
has generated 256 conversions with an impressive ROI of 3.2x.
</Text>
</Stack>
<Stack space="$space-3">
<Heading level={2}>Primary Objectives</Heading>
<Text>
• Increase sales of summer products by 30%
<br />• Grow email subscriber list by 15%
<br />• Boost social media engagement by 25%
<br />• Achieve overall ROI target of 3.5x
</Text>
</Stack>
</Stack>
</DrawerContent>
<DrawerFooter>
<Button onClick={() => setDrawerOpen(false)} size="large">
Close
</Button>
<Button variant="primary" size="large">
Edit Campaign
</Button>
</DrawerFooter>
</DrawerPopover>
</DrawerProvider>
</Page>
)
}
Optional props
asChild
Children composition
type
boolean
default
false
