Sheaf UI

Ask AI about this page

Introduction

The Card component is a responsive, unstyled container component designed for content encapsulation. It provides a clean foundation for building UI sections with consistent spacing, subtle borders, and seamless dark mode support.

Installation

Use the sheaf artisan command to install the card component easily:

php artisan sheaf:install card

Once installed, you can use the <x-ui.card /> component in any Blade view.

Usage

Welcome to sheaf.

    <x-ui.card size="xl" class="mx-auto">
        <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
            <span>Welcome to Sheaf UI.</span>
            <a href="https://sheaf.dev">
                <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
            </a>
        </x-ui.heading>
        <p>
            Powered by the TALL stack, our components offer speed, elegance,
             and accessibility for modern web development. 
        </p>
    </x-ui.card>

Customization

Size

The size prop controls the max width of the card and helps enforce layout constraints in a flexible way. Default is md.

Extra Small Card

Small Card

Medium Card

Large Card

Extra Large Card

<x-ui.card size="xs">Extra Small Card</x-ui.card>
<x-ui.card size="sm">Small Card</x-ui.card>
<x-ui.card size="md">Medium Card</x-ui.card>
<x-ui.card size="lg">Large Card</x-ui.card>
<x-ui.card size="xl">Extra Large Card</x-ui.card>

Component Props

Prop Name	Type	Default	Required	Description
`slot`	string or components	`''`	No	Content to display within the card. Can include headings, text, forms, buttons, and other components.
`size`	string	`md`	No	Sets max-width constraint (`xs`, `sm`, `md`, `lg`, `xl`)
`class`	string	`''`	No	Additional Tailwind classes applied to the card container

Sheaf UI

#Introduction

#Installation

#Usage