# TallStackUI: Environment

> TallStackUI is a TALL Stack (Tailwind CSS, Alpine.js, Laravel, Livewire)
> component library providing 65+ Blade components for building modern web interfaces.

A badge-like component that displays the current Laravel application environment (e.g., "Environment: Local") and optionally shows the current Git branch name. Useful for development toolbars and admin panels.

## Basic Usage

```blade
<x-environment />
```

```blade
<x-environment sm without-branch />
```

```blade
<x-environment lg round>
    <x-slot:left>
        <x-icon icon="server-stack" class="w-4 h-4 mr-1" />
    </x-slot:left>
</x-environment>
```

## Attributes

| Attribute     | Type | Default | Description                              |
|---------------|------|---------|------------------------------------------|
| xs            | bool | null    | Extra-small size (default)               |
| sm            | bool | null    | Small size                               |
| md            | bool | null    | Medium size                              |
| lg            | bool | null    | Large size                               |
| square        | bool | false   | Removes border radius for square corners |
| round         | bool | false   | Uses fully rounded (pill) border radius  |
| withoutBranch | bool | null    | Hides the Git branch name                |

## Slots

| Slot  | Description                                                   |
|-------|---------------------------------------------------------------|
| left  | Custom content rendered before the environment text           |
| right | Custom content rendered after the environment and branch text |

## Soft Customization

Soft customization allows you to override default Tailwind CSS classes used by this component at runtime, either through a service provider or scoped per-instance.

### Customization

```php
TallStackUi::customize()
    ->environment()
    ->block('wrapper.class', 'your-tailwind-classes');
```

### Available Blocks

| Block Name       | Purpose                                                  |
|------------------|----------------------------------------------------------|
| wrapper.class    | Base wrapper styles (inline-flex, border, padding, font) |
| wrapper.sizes.xs | Extra-small text size                                    |
| wrapper.sizes.sm | Small text size                                          |
| wrapper.sizes.md | Medium text size                                         |
| wrapper.sizes.lg | Large text size                                          |