Center

Component

Preview

Preview react

Usage

import { Center } from "@/components/ui/center"

export function CenterDemo() {
return (
  <Center className="border rounded-md h-32 w-full">
    <span className="text-sm text-muted-foreground">Centered Content</span>
  </Center>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/center.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/center.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/center.json

Manual

components/ui/center.tsx

import { type ComponentProps } from "react"
import { cn } from "@/lib/utils"

export interface CenterProps extends ComponentProps<"div"> {}

export function Center({ className, children, ...props }: CenterProps) {
  return (
    <div className={cn("flex items-center justify-center", className)} {...props}>
      {children}
    </div>
  )
}