Center

Component

Preview

Preview solid

Usage

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

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

Installation

CLI

npm

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

pnpm

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

bun

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

Manual

components/ui/center.tsx

import { type ComponentProps, splitProps } from "solid-js"
import { cn } from "@/lib/utils"

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

export function Center(props: CenterProps) {
  const [local, rest] = splitProps(props, ["class", "children"])

  return (
    <div class={cn("flex items-center justify-center", local.class)} {...rest}>
      {local.children}
    </div>
  )
}