ContainerNew

The width of a page's content: centred, as wide as its size and no wider, with room at the sides on a phone.

$ pnpm dlx shadcn@latest add @dashral/container

Changelog

Faster exports, and a new date picker

Exports of large tables now stream to the file as they're read, so a report of fifty thousand rows starts downloading in a second instead of a minute. The date picker gets presets for the ranges people pick most.

Installation

$ pnpm dlx shadcn@latest add @dashral/container

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/container.json

When to use

The width of a page's content: an article, a settings page, every part of a landing page.

When not to use

A landing page's part with a heading: Section, which has a Container inside.
A box with a border and a background: Card.

Usage

Centred and no wider than its size, with room at the sides on a phone.

example.tsx

1import { Container } from "@/components/dashral/container"
2
3export default function Article() {
4  return (
5    <Container size="sm" className="py-12">
6      <h1 className="text-3xl font-semibold">Faster exports</h1>
7      <p className="mt-4 text-muted-foreground">Large tables now stream to the file as they're read.</p>
8    </Container>
9  )
10}

Using the npm package? Import from @dashral/ui/components/container instead, here and in the examples; the rest is the same.

Examples

Sizes

sm, md and lg side by side; padded={false} drops the room at the sides when the content brings its own.

size="sm"42rem · articles, forms

size="md"56rem · docs, settings

size="lg"72rem · most pages

API reference

Container

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"` How wide the content gets: 42rem, 56rem, 72rem, 80rem, or the whole width.	`"lg"`
`padded`	`boolean` Room at the sides, 16px and 24px from sm up, outside the size, so content never touches a phone's edge.	`true`
`asChild`	`boolean` Its classes on your own element, e.g. a <main> or an <article>.	`false`
`className`	`string` Extra classes, merged with cn() so yours win.	—