Page Shells
Typical layout shells of dashboards in which components can be easily inserted.
Page Shell with 3-Column KPI section + Tabs
Dashboard
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
import { Card, Grid, Title, Text, Tab, TabList, TabGroup, TabPanel, TabPanels, } from "@tremor/react"; export default function Example() { return ( <main> <Title>Dashboard</Title> <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text> <TabGroup className="mt-6"> <TabList> <Tab>Page 1</Tab> <Tab>Page 2</Tab> </TabList> <TabPanels> <TabPanel> <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6"> <Card> {/* Placeholder to set height */} <div className="h-28" /> </Card> <Card> {/* Placeholder to set height */} <div className="h-28" /> </Card> <Card> {/* Placeholder to set height */} <div className="h-28" /> </Card> </Grid> <div className="mt-6"> <Card> <div className="h-80" /> </Card> </div> </TabPanel> <TabPanel> <div className="mt-6"> <Card> <div className="h-96" /> </Card> </div> </TabPanel> </TabPanels> </TabGroup> </main> ); }
Page Shell with big Container + 2-Column bottom KPI Section
Dashboard
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
import { Card, Title, Text, Grid } from "@tremor/react"; export default function Example() { return ( <main> <Title>Dashboard</Title> <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text> {/* Main section */} <Card className="mt-6"> <div className="h-96" /> </Card> {/* KPI section */} <Grid numItemsMd={2} className="mt-6 gap-6"> <Card> {/* Placeholder to set height */} <div className="h-28" /> </Card> <Card> {/* Placeholder to set height */} <div className="h-28" /> </Card> </Grid> </main> ); }
Page Shell with KPI Sidebar
Dashboard
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
import { Card, Title, Text, Grid, Col } from "@tremor/react"; export default function Example() { return ( <main> <Title>Dashboard</Title> <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text> <Grid numItemsLg={6} className="gap-6 mt-6"> {/* Main section */} <Col numColSpanLg={4}> <Card className="h-full"> <div className="h-60" /> </Card> </Col> {/* KPI sidebar */} <Col numColSpanLg={2}> <div className="space-y-6"> <Card> <div className="h-24" /> </Card> <Card> <div className="h-24" /> </Card> <Card> <div className="h-24" /> </Card> </div> </Col> </Grid> </main> ); }
Page Shell with KPI Grid
Dashboard
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
import { Card, Title, Text, Grid } from "@tremor/react"; export default function Example() { return ( <main> <Title>Dashboard</Title> <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text> <Grid numItemsMd={2} className="mt-6 gap-6"> <Card> <div className="h-44" /> </Card> <Card> <div className="h-44" /> </Card> <Card> <div className="h-44" /> </Card> <Card> <div className="h-44" /> </Card> <Card> <div className="h-44" /> </Card> <Card> <div className="h-44" /> </Card> </Grid> </main> ); }