README

Warning: This package is currently in Alpha. APIs may change until version 1.0.

Tallcn UI

A collection of re-usable components built with Tailwind CSS v4, Laravel Blade, and Livewire. Inspired by Shadcn UI, but tailored for the TALL stack.

Features

Tailwind CSS v4 native (using OKLCH colors).
Accessible: Built with accessibility in mind.
Customizable: Easily themeable via CSS variables.
Lightweight: No unnecessary JS, powered by Alpine.js where needed.

Installation

1. Install via Composer

composer require duroycalvin/tallcn

2. Run the Install Command

This will publish the configuration and setup the basic theme.

php artisan tallcn:install

3. Setup Tailwind CSS v4

Ensure your app.css includes the Tallcn source path and theme variables:

@import "tailwindcss";

@theme {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... other variables */
}

@source "../../packages/duroycalvin/tallcn/resources/views";

4. Run the artisan optimize command

This will clear all cache.

php artisan optimize:clear

5. Run the npm command

This will delete all cache.

npm run dev
or
npm run build

Usage

Button

The Button component comes with various variants and sizes.

Standard Button

<x-tallcn::button>
    Click me
</x-tallcn::button>

Variants

<x-tallcn::button variant="default">Default</x-tallcn::button>
<x-tallcn::button variant="destructive">Destructive</x-tallcn::button>
<x-tallcn::button variant="outline">Outline</x-tallcn::button>
<x-tallcn::button variant="secondary">Secondary</x-tallcn::button>
<x-tallcn::button variant="ghost">Ghost</x-tallcn::button>
<x-tallcn::button variant="link">Link</x-tallcn::button>

Sizes

<x-tallcn::button size="sm">Small</x-tallcn::button>
<x-tallcn::button size="default">Default</x-tallcn::button>
<x-tallcn::button size="lg">Large</x-tallcn::button>
<x-tallcn::button size="icon">
    <svg>...</svg>
</x-tallcn::button>

As a Link (Tag Property)

To use the button styles on an anchor tag, use the tag property:

<x-tallcn::button tag="a" href="/dashboard">
    Go to Dashboard
</x-tallcn::button>

Configuration

You can customize the default theme by editing the variables in your CSS or publishing the config:

php artisan vendor:publish --tag=tallcn-config

Scripts & Styles

Don't forget to include the directives in your layout:

<head>
    @tallcnStyles
</head>
<body>
    ...
    @livewireScripts
</body>

License

The MIT License (MIT). Please see License File for more information.

duroycalvin / tallcn

Maintainers

Details