TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.
Home Page: https://tallstackui.com
License: MIT License
TallStackUI is a powerful suite of Blade components for TALL Stack apps.
Visit our website to see the documentation
If you want to support the development of TallStackUI, you can do so by becoming a sponsor.
🐞 If you spot a bug, please submit a detailed issue.
💬 If you love chatting, we have a Discord server dedicated to the TallStackUI community.
Thank you for wanting to be part of our team! 👋 Click here to learn more.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Inputs
Creating a form with a checkbox or radio field with a validation array|max:3 using wire:model.live="field" causes the error message when the user selects more than 3 items to appear in all inputs, as in image below:
With a way to avoid the input from rendering the error, we can only show an error message like the example below:
No response
No response
Introduction of the button components.
We want to create the first button components. At first moment only the basic is necessary:
Introduction of the input components.
Basic input types:
Extension of Slide component
Sometimes you need to have complete control of how to show content, slides or drawers opens from left or right in most of cases, but having top or bottom it's useful, specially in mobile devices where slides hide everything behind even if you aren't using the all the space that the slide brings. So, from top or bottom, the slide height may be flex and able to continue to use the size variations (md, lg, xl, etc).
https://flowbite.com/docs/components/drawer/#top-drawer
No response
Introduction of the alert components.
Like Bootstrap, in this ticket, I want to add all alert variations.
Inputs
Maskable input helps us when we need an input pattern such as phone, ID, email and whatever. It is possible to make any pattern.
No response
No response
I'm not sure how possible this will be, but I wish I could use the tooltip component for... basically anything, and have the tooltip appear on mouseover. The best example is the new clipboard icon, where I'd love to be able to have a tooltip, but I could also see using it on buttons, etc.
The tooltip component is great and easy to use! Unfortunately, it can currently only be used as an icon. If possible, it would be great to allow putting a tooltip on any component or even other non-TallStackUI page elements!
No response
Thanks for your consideration!
Data display
I would like to propose the addition of chat bubbles as a feature in the library. Chat bubbles are a visual representation commonly used in messaging applications to display individual messages within a conversation. This feature can enhance the user experience and make the library more versatile for various chat-based applications.
UI has never been my strength. I've created these small examples of chat bubbles, bubbles with header and footer text, bubbles with avatars, and colored bubbles.
https://daisyui.com/components/chat/
No response
We recently received a pull request that added the type attribute to inputs. The pull request was accepted, but we noticed the problem was a bug in Laravel.
The bug means that when there is a child component with properties with the same property name as the parent component, after calling the child component inside the parent component, the parent component loses the attribute, as detailed in this report: laravel/framework#49206. A pull request resolved this issue in Laravel: laravel/framework#49216 🎉
If you are using TallStackUI, upgrade your Laravel to the latest versions periodically to receive the fix for this problem when released, as it is not a TallStackUI bug.
I would love a Clipboard component that would display a clipboard icon (by default, could be changed). On mouseover, a configurable tooltip would say "Copy to Clipboard". On click, it would copy the contents of a property into the user's clipboard.
Suggested:
<x-clipboard icon="clipboard-document-check" tooltip="Copy to Clipboard" content="This will be in the clipboard on click." />
When displaying content to a user, sometimes it would be helpful to allow a user to easily copy certain text from a page. For example, we have a block that contains multiple key/value pairs. They are displayed one way, but when copied/pasted from the page, for example to paste into an email, the formatting is off. It would be great if I could easily add a clipboard component that would allow me to format the text and allow my users to easily copy it.
No response
Thanks for your consideration!
It seems the classes for table td tags are hardcoded:
tallstackui/src/resources/views/components/table/index.blade.php
Lines 63 to 67 in 935399e
TallStackUi::personalize()
->table()
->block('table.td')
->remove('text-sm');No response
10.39
3.3.3
1.8.1
8.2.14
Linux
No response
the "normal" link (a href=xxx) is styled like normal text. Sometimes you may like to style it more than a link.
So i started creating my own link component.
i know it is a very "silly" component.
but with this component it is easy to change the design globally if you want to change something (for example make all links bold)
No response
here is my resources/views/components/link.blade.php if you like it feel free to use it (if not feel free to close the issue ;-)
<a {{$attributes->class(['underline'])}} >{{ $slot }}</a>hi
please make a modal from mobile is slide from bottom to up (until the middle screen)
and in desktop its open like a regular modal popup at the middle
like aliexpress
No response
No response
Introduction of the icon component.
At the first moment, we need to support only hero icons. After the initial release, we can prepare a sprint to add support to other icons provided by Blade UI Kit.
When using Normal Livewire with say using an input component when an error is thrown the input box turns red and you get the error message under it. but when using the same component on Livewire's Volt package you don't get the error message or the red colouring.
Install Laravel Breeze with Livewire Volt class, install TallStackUI, on the login blade just replace the email input component with
<x-input
type="email"
label="Email Address"
wire:model="email"
required
autofocus
autocomplete="username"
/>then login with incorrect email you will get no error, but if you do the same on a normal Laravel install with Auth set up via the doc's with Livewire installed normally it works.
No response
3.2.6 + Volt 1.6.0
1.2.0
8.3
macOS
No response
if you have a short label, then the position is wrong - it is to high
use a short label inside a checkbox
No response
10.35.0
3.2.6
1.4.0
8.1
Windows
No response
I have a component with 2 styled selects, the 2nd one is dependent on the first one, and in the component's initial render it does not have any options. As soon as I select an option in the 1st, I populate the options in the 2nd, but it does not render the new options
public function mount(Projeto $projeto)
{
$this->projeto = $projeto;
$this->areas = $this->projeto->areas;
$this->dispositivos = collect();
}
public function updated($property, $value)
{
if($property === 'form.area_id'){
$this->area = $this->areas->firstWhere('id', $value)?->load(['dispositivos']);
$this->dispositivos = $this->area?->dispositivos ?? collect();
return;
}
}<x-select.styled :options="$areas->toArray()" wire:model.live="form.area_id" select="label:nome|value:id" searchable />
<x-select.styled id="dispositivos" :options="$dispositivos->toArray()" select="label:nome|value:id" wire:model.live="form.dispositivo" searchable />
@php
if($dispositivos->count()){
dd($dispositivos); // returns the correct data
}
@endphp
Install a fresh Laravel app, install TallStackUl, add 2 <x-select.styled /> to a Livewire component where the 2nd one depends on options filtered by the 1st one value, visit the page, select a value in the first <x-select.styled/ >
No response
10.35.0
3.2.6
1.4.5
8.1.23
macOS
No response
When I use <x-select.styled wire:model='selectedSites' :options="$sites" select="label:label|value:value" searchable multiple />, I get the error:
TallStackUi\View\Components\Wrapper\Input::__construct(): Argument #3 ($id) must be of type ?string, Closure given
Livewire properties:
Works in 1.5.1, error in 1.5.2
No response
10.38.1
3.3.3
1.5.2
8.2.13
Linux
No response
This components are for using it with the TALL-Stack.
BUT sometimes you need to use it WITHOUT Livewire (for example if you create a "real old HTML" Login-Form like Jetstream does...)
this works also fine, but the error-Messages are not rendered, because there is no livewire-model and so no matching of the error-bag.
To avoid this problem, it is only needed to add a wire:model="xxx"to the component - even if you DON'T use Livewire. After adding this, the error - messages gets rendered even if it is a plain HTML-Form posting its data...
for example:
<form method="POST" action="{{ route('register') }}" novalidate>
@csrf
<div class="mt-4">
<x-input id="firstname" name="firstname" wire:model="firstname" type="text" label="{{ __('Vorname') }}" value="{{old('firstname')}}" autofocus autocomplete="vorname"/>
</div>
.
.
.
</form>if i add classes to the component - for example like this:
<x-alert color="green" icon="check" class="mb-6" close>
{{ __('Wir haben dir eine neue Bestätigungs-Mail zugesendet. Bitte schaue auch mal in deinem SPAM-Ordner nach, falls sie nicht bei dir ankommt.') }}
</x-alert>then the "mb-6" is not added to the html-output.
this means, i can't style the components with additional classes.
at the moment i helped myself with:
<div class="mb-6">
<x-alert color="green" icon="check" close>
{{ __('Wir haben dir eine neue Bestätigungs-Mail zugesendet. Bitte schaue auch mal in deinem SPAM-Ordner nach, falls sie nicht bei dir ankommt.') }}
</x-alert>
</div>but i think this is not the "right way"...
To style the HTML with margins and more...
No response
No response
At the moment you have "two" main colors:
primary
secondary
But the problem is, the secondary color is the color of the headings and the text.
i have a logo with TWO color and i like to have these colors in my design (for example focus = primary and button = secondary
if i change now secondary color to my color, the text becomes colored. this is not what i want.
so maybe it is cool to have a additional third color (tertiary) to realize this.
So if you have a logo with 2 colors you can use all colors inside your design.
one more color to have two "real" colors to use (for example for the buttons or icons)
https://getbootstrap.com/docs/5.3/customize/color/#colors
No response
When i add a alert like this:
<x-alert color="green" icon="check" close>
{{ __('Wir haben dir eine neue Bestätigungs-Mail zugesendet. Bitte schaue auch mal in deinem SPAM-Ordner nach, falls sie nicht bei dir ankommt.') }}
</x-alert>the close button at the right side is vertically centered. i think it should be at the right top position...
copy the code into your blade.php template
No response
10.35.0
3.2.1
1.5.1
8.1
Linux
No response
Installing Tallstack UI breaks standard app installation e.g the dropdown for the settings menu does not show up
using the laravel installer:
open site in browser and register a user, then observe that there is a profile dropdown in the upper right corner
Now in stall tallstack ui
following the instructions
Open the site and observe that the 'dropdown' does not appear anymore
removing the tallstack ui package
composer remove tallstackui/tallstackui
and cleaning up the tailwind.config, one will get an error
Class "TallStackUi\View\Components\Dropdown\Dropdown" not found
when accessing the dashboard
(Note: the error from removing tallstack ui is not in the repository)
https://github.com/rabol/tallstack
10.39.0
3.3.3
1.7.1
8.3.1
macOS
No response
Very good work
It would be nice if there were
DatePicker
TimePicker
and DateTimePicker
maybe someone likes to use tabler-icons instead of the internal icons (because tabler icons have 4850 icons (https://tabler.io/icons)
to do this follow these instuctions:
composer require secondnetwork/blade-tabler-iconsphp artisan vendor:publish --tag=tallstackui.config 'icon' => null,to disable the internal icons
resources/views/components/icon.blade.phpwith the following content:@props(['icon', 'name', 'left' => false, 'right' => false, 'error' => false, 'strokeWidth' => 2])
@php
$name = match ($icon ?? $name) {
'eye-slash' => 'eye-off',
'cog' => 'settings',
// 'not-existing-tabler-icon-name' => 'existing-tabler-icon-name',
default => $icon ?? $name
};
@endphp
@php($span = $left || $right)
@if ($span)
<span class="inline-flex items-center gap-x-1">
@endif
@if ($left)
{!! $left !!}
@endif
<x-dynamic-component component="tabler-{{ $name ?? '' }}" {{ $attributes->merge(['stroke-width' => $strokeWidth])->class(['text-red-500' => $error]) }} />
@if ($right)
{!! $right !!}
@endif
@if ($span)
</span>
@endifIt would be interesting if it were possible to change the icon type in the confirm toast component.
I tried to create an undo action and it would be interesting to provide the undo option with feedback that everything went well and not with a question icon, but it seems to me that when the type is not question it does not render the options sent.
$this->toast()->timeout(10)->confirm([
'type' => 'success',
'title' => 'Arquivo enviado com sucesso!',
'description' => '',
'options' => [
'confirm' => [
'text' => 'Desfazer',
'method' => 'dispatch',
'params' => ['analytics_3d:undo-upload'],
],
],
]);No response
No response
I have noticed when I use, the style.styled outside livewire when I set the :value tag on an element it adds extra "" quotes on the value itself. which makes validation fail on the frontend.
Create a <x-select.styled> element outside livewire
with a preselected/predetermined value that is a string coming from the database.
<x-select.styled select="label:label|value:value" :options="\App\Models\User::availableLocales()" placeholder="Locale" :value="$user->locale" name="locale" label="Locale" />
No response
10.38.2
3
1.5
8.2.8
macOS
No response
I put in the
resources\views\layouts\navigation.blade.php
Heya! Thanks for the great package!
Not sure wether this is a bug or wanted behaviour: I'm using e.g. <x-textarea wire:model="address" label="Address" resize-auto /> and it does not resize the textarea when the page is loaded. As soon as I type anything in there, it resizes to the right size.
Add the following code somewhere, only lines 1-3 are shown on load.
<x-textarea resize-auto>Test 1
Test 2
Test 3
Test 4
Test 5
Test 6</x-textarea>No response
10.35.0
3.2.6
1.3.4
8.1.21
macOS
No response
I have a "Form Modal" with a Delete button inside. When the delete button is clicked, a Dialog is opened to confirm the action by the user. When the user clicks on the cancel button, the Diolog and the Modal are closed. What is expected is that only the dialogue will be closed.
Just reproduce the description above
No response
10.39.0
3.3.3
1.6.7
8.2.12
Linux
No response
Maybe i am wrong, but at the moment i have the following problem:
my primary color is very bright (for example use white). i can change the Background color of the button by defining the primary color as white (only for example to see it better). Now the button is white Background an white text.
You can't read the text.
But i didn't find a way to change the color of the button text to (in this example) black...
To read the text inside a button if you change primary color to a very bright colot.
No response
No response
A styled input for type date with a nice datepicker would be awesome. The built-in browser thing is not really good. Thanks for considering :-)
A pretty and solid datepicker unlike the browser stuff.
https://flowbite.com/docs/plugins/datepicker/
No response
At the moment you have a light Version of (rounded) buttons. But ahat i like is a "transparent Version" of the button. i mean a transparent Background and a "normal" Icon (or label)
It looks better in top-Navigations
No response
No response
found bad link in button section of docs, while clicking on a button, check this link
https://tallstackui.com/docs/ui/button#normal-tag-a-usage
Sometimes it is necessary to add a link or something like this in the label of the checkbox.
At the moment this is not possible
For example if you want
[x] i accept the terms and conditions of this site
with a link to the terms and conditions
No response
try this
<x-checkbox>
<x-slot:label>
<b>Receive</b> Alert<br>
xxx<br>
xxx<br>
xxx<br>
</x-slot:label>
</x-checkbox>then you see what i mean...
The confirm dialog set buttons colors
More customization
No response
No response
this is NOT a issue, only something to think about.
Maybe it is worth to think about semantic colors.
i mean
color-danger
color-warning
color-info
color-success
and so on.
this is to be sure, that every error (input, alert, modal,...) has the same color.
like here:
https://daisyui.com/docs/colors/
so i think it is easier if there are more and more contributors for this great UI
Components -> Form -> Inputs for html <search />
Components -> UI -> for Modal html <dialog />
fully support of html native syntax
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
No response
Introduction of the validation error color.
--
Most UI's come with a Navbar and some menu navigations.
Easier to get started using the whole UI stack and allowing to keep the site style consistent. and Navigation is a pretty important part of that.
Working on a TallStackUI Starter/Demo application and while sorting out the Navbar it felt something like this should be more part of the UI library.
https://mary-ui.com/docs/components/menu , https://daisyui.com/components/navbar/ , TailwindUI for some examples
No response
When I click on the button to select color, it not meant to trigger a submit request when the component is wrapped in a form.
Add component inside a form tag, ensure a method is added to the wire:submit action, then click on the botton to display color.
No response
10.37.3
3.3.0
1.5.0
8.2
macOS
No response
When I use User::all() for the $rows, the table component works. When I use User::paginate(20), it fails with the error:
Property type not supported in Livewire for property [{"current_page":1,"data":...
I can provide the full exception if needed, but it's very long and I'm not sure it's informative.
<?php
namespace App\Livewire\Admin\Pages;
use App\Models\User;
use Livewire\Component;
class Table extends Component
{
public $headers = [
['index' => 'id', 'label' => '#'],
['index' => 'name', 'label' => 'Member'],
];
public $rows = [];
public function mount()
{
$this->rows = User::paginate();
}
public function render()
{
return view('livewire.admin.pages.table');
}
}<div>
<x-table :$headers :$rows />
</div>No response
10.39
3.3.3
1.7.0
8.2.14
Linux
No response
When i create a checkbox (or when i look at your own demo / documentation) the label of the checkbox is NOT the label. it is outside the label-Tag in html. This means if i click at the label of a checkboc, the checkbox get not checked.
Open your documentation at
https://tallstackui.com/docs/form/checkbox
and click at a label of the checkbox. You can see, that the checkbox didn't get checked.
No response
its your doc-page
its your doc-page
its your doc-page
its your doc-page
Linux
this is your html-code:
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" class="form-checkbox rounded transition ease-in-out duration-100 border-secondary-200 w-5 h-5 text-primary-500 focus:ring-primary-500 dark:ring-offset-dark-900" checked="">
</label>
<p class="text-sm font-medium text-gray-700 dark:text-dark-400 ml-2"> Primary </p>The text has to be INSIDE the
When I am want to run a saveHandler on the element value change nothing happens
add a wire:change to any of the following elements
No response
10
3
1.6
8.2
macOS
No response
i would like a new component called progressbar.
to have a percent-indicator..
No response
i know this is not YOUR programming style, but i don't have the time to help you more (fork and so on). i hope if i contribute my code, YOU can faster itegrate this into YOUR coding...
resources/views/components/brogressbar.blade.php
@props(['value' => 0, 'max' => 100, 'color' => 'primary'])
@php
$max = max([0, $max]);
$value = max([0, $value]);
$value = min([$value, $max]);
$width = ($value / $max) * 100
@endphp
<div class="relative pt-1">
<div class="overflow-hidden h-2 flex rounded bg-secondary-200 dark:bg-dark-600">
<div style="width:{{$width}}%" class="bg-{{$color}}-500"></div>
</div>
</div>```Having an error component using <x-errors only="session('status')" /> when a form has anther error trigger example incorrect username it triggers the box to show up when it does not need to.
create a new Laravel app, use breeze with any of the Livewire option replace the session error component on the login page with <x-errors only="session('status')" /> then login with an incorrect username
No response
3.2.3
1.2.0
8.3
macOS
No response
I'm trying to use x-select.styled to dynamically add and remove component. For e.g as below
@foreach($Items as $index => $Item)
<x-select.styled
class="w-full"
wire:model.live="email_address.{{$index}}"
clear="false"
reset="false"
placeholder="Select email"
:options="$emailList"
select="label:label|value:id"/>
@endforeach
The question is how I can get model value on changes ?
Inputs
More customization
No response
I need to add a header pixel script in my app, but the textarea escapes all html tags, there should be an attribute that disables this feature in the inputs
If you have a password input then the eye is outside the input.
us a password input
No response
10.35.0
3.2.6
1.4.0
8.1
Linux
if you add a "position:relative" css style to the first div inside the wrapper then the icon is at the right position.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.