Box

A simple container component for wrapping content. Can be used as a vanilla div or with the Box component wrapper.

Content Box

A container with padding where content is aligned to the top-left. Perfect for cards and content panels.

Card Title

This is a content box with text aligned to the top-left. Perfect for cards, panels, or any container with content.

export function ContentBox() {
  return (
    <div className="w-full bg-neutral-800 border border-white/10 rounded-lg p-6">
      <h3 className="text-lg font-semibold mb-2">Card Title</h3>
      <p className="text-white/70">
        This is a content box with text aligned to the top-left. Perfect for cards, panels, or any container with content.
      </p>
    </div>
  )
}

Centered Box

A box with flexbox centering where content is perfectly centered in the middle.

Centered Content

export function CenteredBox() {
  return (
    <div className="w-full h-32 bg-neutral-800 border border-white/10 rounded-lg flex items-center justify-center">
      <span className="text-white">Centered Content</span>
    </div>
  )
}

Tooltip

Flex