Flux, the UI Library for Livewire

00:00:01 I have bad news are you ready for the bad news you suck at design you all suck at design raise your hand if you suck at design yeah okay raise your hand if you think you're good at design you suck at design except Adam is May do you suck at design he's okay Adam's okay David probably also doesn't suck design neither does Jack um good news it's okay I also suck at design I do and I know this me and you are developers we think we're better at design than we are but we have tells we have these little

00:00:39 things that we do that make us suck at design first and foremost is we use random fonts like robato leato Open Sands we never use the one golden font that every good designer uses which is inter if you don't know that and you want to be a good designer you use inter second thing this text is so big what is that text 6xl or something if you want to be a good designer oh we like we use text base right like if you're like writing a paragraph on your web page you use you don't put text sizing it's base

00:01:10 and then a headings like text LG and then text XL we just go up and up and up good designers text smm everything texts I'm telling you if you don't know that you're not going to be able to unsee this go to anywhere you go to YouTube biggest thing on there text base then it's texts linear the biggest thing is like texts is their logo okay here's a nicely designed little select menu right choose roll perfectly sized you and me we would do this we love a full width input element they're all full width and it's yes we

00:01:45 would take a nice look at this oh radio group little descriptions we would take this and we go you know what that should be a full width select right there no radio groups we go this I like a little segmented little t view it's great nope full with select everything fullwidth select if it can be a fullwidth select it is a fullwidth select and if you didn't think that you sucked yet you're going to think it now you got your landing page with your features there's like five features you're like what's the logo for each

00:02:12 feature I know I'll do this if you've ever used this icon you suck at design okay we suck but it's okay because Hugo does not suck at design meet Hugo this is Hugo he works for tupal and he was kind enough to bless us with his incredible design skills and he worked on flux with me and I got schooled a master class in just like so many things shortcuts I take things I I don't have consideration for he does and uh so thankful for H give me round of applause for Hugo thank you Hugo I love you man when

00:02:52 France wakes up thank you all right let's see flux right come on here it is you ready this is it that's gole here's my [Applause] bookmarks flux is a UI library for liveo an official UI library for liveo I've wanted to do it forever it's been the most requested thing forever and we finally have it and I'm so pumped to do it I've put it off because it's such a huge undertaking and I didn't want to do it wrong um but now that we have Hugo we can do it right and I'm just pumped to show it to you let me show you a few

00:03:41 just like demos built with flux so this is a form you got to have a form um hold the Applause but maybe throw in like an ooh or an ah yeah uh a nice form and a conbine board cuz we're all building conbine boards right it's a good demo though um table got to have a table this is flux you're going to to be building this stuff it's going to be so sweet o and then so this is another Hugo ISM he was like handed me a fig Mile with dark mode and I'm like H MVP Hugo like I'm not going to do dark mode and he didn't

00:04:13 he didn't even like say he wouldn't even argue for it he was just like confused and that that was I feel that was so long ago I'm a different man everything is dark mode everything so all your apps it's the coolest thing because you do something and it looks good and then it just looks good in dark mode um um yeah all right so what is flux like that's flux but what is it it is bigger than that it's a bunch of Blade components basically with a bunch of tailwind and a little bit of JavaScript but I wrote it so you don't have to

00:04:46 write it so you know this kind of thing you have in your app like x button those blade components I wanted flux to feel a little differentiated inside of your app so it's blade components in every way except it's flux button and and the inard of flux button actual blade file looks like your blade components I want it to feel like how you would write them with whatever attributes slots we use Tailwind right in line so you can just edit stuff um and that's that okay so here is flux and I just want you to know

00:05:17 that this is actually flux so this button is the actual flux button being rendered you're going to see some some stuff that's going to make you think it's not but it is uh so this is the entire slide I started with like key Noe and other things but realized all you need for an entire slide presentation is a single Live Wire component so the whole presentation is this one Live Wire component called slides and it has a property called slide and yesterday I'm doing this and I realized this is the first time I've ever built a counter in

00:05:47 the wild like this is a counter it's literally a number that increments and it's useful so I found the one use case for a counter um all right yeah so that's that and also like just to reiterate everything you see is totally you know actually being rendered um yes okay that was supposed to be cooler let me make that cooler ready save yeah right right view transitions baby all right so let me give you a kind of a one-on-one tour of flux and it's API things that you're going to see often so variants if there's a variant of a

00:06:27 component we use the word variant so buttons have a primary variant another Hugo ISM we suck at design all our buttons are primary they're all primary but like laravel Cloud I I was look one primary button one all the rest are this kind of muted button so we suck but we made the default not primary um we stressed a lot about like the little top border thing and making it you know nice and um we have a danger variant filled and ghost we got icons for icons we use heroic cons uh it is heroic I asked Adam

00:06:58 the other day it's heroic cons it's not hero icons this I learned um so yeah you just go to Hero what is that I don't use head PL what why who hacked this thing um so yeah you go to heroic cons you search whatever you want like search and then they show you the thing and you just take the name and we have all these variants solid mini micro whatever you can make it trailing nope oh there's one icon that heroon doesn't have and you just saw it but we added it it's a loading indicator so you can just say

00:07:32 loading anywhere you're using an icon and you'll get this animated SVG um icon trailing whatever but this is kind of in like expresses Our intention with flux is the naming it's like a name that's easy to remember icon and then a modifier trailing and we use the word trailing instead of end or left or right or bottom or whatever um tool tips easy tool tips got to have them okay so this is an input and a button and something I want to show you is the sizing so we can size things down a lot of times it's bring your own sizing like

00:08:02 an icon like you size that yourself you know Tailwind um but something like this that padding matters with sizing will give you sizes and we try to make them t-shirt sizes like Tailwind so it's just you know bass SM XS that kind of thing so we we size these down a little bit and something that this is why component libraries are great and why we should use them because I never used them and I did stupid stuff like you have a bunch of items in a bar but like one of them has a border and one doesn't so now it's

00:08:27 off by like two pixels and it's not everything's lined up perfectly but everything in flux here's a badge everything in flux is lined up perfectly so if you have like a badge with no border and then a button with a border whatever like all of them if they're SM or EXs whatever it is a select drop down tabs it's all going to be the exact same height and you can just rely on that okay so those are things that you're going to find in a lot of component libraries but the things I'm most excited about are things you don't

00:08:55 things that were just born out of me using flux and going ah this is kind of annoying how could we we solved that problem and just originally happened um so picture this you got like a web mobile thing with a little sidebar toggle there that button and it all lines up great right like you have that line right there it's perfect but then Hugo says we need to make that a ghost button so you say variant ghost but now it's ins set so your eye is like it's a little weird that line just moved so what do you do how do you fix that you

00:09:25 can add some negative margin but it feels like a hack and it's like very specific it's like oh I'm going to hardcode this specific margin but what if I use a different icon what if this changes what if the sizing changes so in anything that is ghostly meaning it has uh like a visual surface area and then a true surface area if you hover or something um we offer the inset prop so you can say inset left and now it just adjusts for its own internal padding and this inset prop exists with again anything that that it should like a

00:09:56 badge if you I don't know if you saw that I added this badge and the whole line just like adjusted you know because the badge isn't just text it has padding so you can add inset top and bottom and it'll compensate for its own padding and just render perfectly in line so you're going to use inset all the time I promise W all right uh and you'll see it in the W like this is just the stripe dashboard um and there it is like that same pattern where that's a hover State they offset things so that visually it's you

00:10:27 know aligned all right so let's talk about form that's 101 this is 102 flux field all forms start with Fields this is the field component and you can build up your field so flux field then input you add a label at the top description below it and then an error below that and we use this full sort of this is this is flux's philosophy when it comes to composability is like give you the individual components so that you can build up what you need if you need uh some extra treatment designer word treatment we

00:10:57 don't say treatment because we suck but designers they all say treatment all the time um so if you want some sort of different treatment you can just do it because you have the thing you're not adding like 10 extra props to the input element or input component and another cool thing that we do is a lot of components don't have margin but they have margin if they should like if they're relative to each other so a lot of it's like CSS sibling selectors so if the label and then description are together they'll be a specific margin if

00:11:23 you move the description check this out you just move the description and then it adjusts all the margin automatically so you can just adjust things by moving the elements um all right so that's cool but that's six lines for an input with a label and you do that all the time you got 10 input fields in your form is that 60 lines of code plus a bunch of extra stuff it's visually a lot so another like philosophical thing with flux is to have this composability at your fingertips for when you want it but then

00:11:50 like go from here all the way to here not this middle linal space where there's props flying everywhere it's like really ugly and big and gross and then really tiny and really clean so that's what we have it's a shortcut for all that stuff you add label or description uh to any input form element and internally it'll wrap itself in all of those elements and then of course you can always just drop back down and do it yourself all right so that's an El or an input element a field you can add a badge to it um this is a phone input and

00:12:18 right now it accepts whatever you want to put in it oops um but like you might want to put some masking some input masking in it so we offer input masking you just say mask and now you type in and it's limited to what you type in yep can't type letters but you can type numbers so yeah input masking comes out of the box and this is a point I want to make is a lot of these component libraries on the surface they have clean apis and they look visually clean but under the hood they're cobbling many

00:12:45 many other libraries together and so what you end up with is this massive JavaScript build and it's not cohesive everything in we have one dependency floating UI we'll talk about that later that we can get rid of but everything else is hand done so real quick I just yesterday I was like Googled like most popular input masking package in JavaScript went to unpackage and this is the code that you would get if you just took someone else's input masking code this is straight up it's I'm not going to like you know name names don't look

00:13:15 at that URL I'm not trying to throw shade but this is a lot for input masking this is Alpine's input mask plugin that's been in production for like two years and it works great that's the code right there bam so which one do you want so this results in flux being Custom Tailor made at every level um and it just feels like solid and lightweight okay so this is an input field with a little icon if you wanted to make this clearable so let's say this is a search you want to make it clearable you add icon trailing x mark

00:13:43 whatever you can't click it right so this is a cool pattern you probably heard me talk about but these props that just accept strings for the happy path a lot of them can just be used as slots in a blade component so in this case if you want to instead take the slot of Icon trailing get the positioning and then use your own button you can just do slot name icon trailing and put your own button in there and then attach all your input you know all your click listeners and it just works um all right so that's that but we

00:14:12 also yeah so there's like three times I ever need to do that let's just give them to you so this is clearable you just say clearable on an input and I don't want to start that you clearable on an input and then you can just clear it and we also have viewable for password inputs and you get that button right there and you can view it it viewable but wait copyable pretty sweet all right um so yeah we got this search thing let's actually make it work we have auto complete influx so we can just say whatever start typing hit enter

00:14:55 and get that good good auto complete whoops and that's what it looks like it's yeah Auto complete autoc complete first child is a regular input put whatever you want in there this is another thing you'll see a lot I try my best to avoid autocomplete autocomplete dot trigger autocomplete do input autocom complete. panel blah blah blah it's like try to keep things as composable and minimal as possible um all right this is a checkbox group you can add descriptions you can make it a radio group you can make it a

00:15:23 switch group and all these things you don't have to wire up all that you know like tailwind and and styling yourself there's defaults with the label prop and whatever and then of course you can customize however you want to with the full field API okay let's talk about this checkbox group this is another one of those whatever I don't know if it's I don't want to say it's an innovation I don't use that word but it is something that I haven't seen that I was like this is the way the web should work you're working

00:15:48 with a checkbox group and honestly like to a browser each checkbox has its own form control right but to me and you we have like an array and we're binding that array to each item in this checkbox which is annoying and then you have like what's the syntax is it like wire model or V model or whatever like the array. star or do you know like whatever so you should be able to wire model directly to the checkbox group so we have that you can just wire model to a checkbox group and now all the data will bind directly

00:16:15 to the group and you don't have to do all that finagling um okay and so let's like look at this checkbox group for a second like what's going on under the hood I'm going to show you the actual blade component for checkbox group uh is that it yeah okay okay so this is it this is the full blade component the full source for checkbox group uh at the top you'll see this a lot influx every one of them has this PHP I do a little class builder thing it just concatenates strings it just looks kind of nice um and then right there

00:16:43 that WID field that's what handles all that pass label in and then turn it into a field um so it's just a little wrapper and then UI checkbox group so this is weird but like what is that you might expect okay he's doing some custom things with wire model there's inline Alpine Maybe either there's an entangle or modelable or whatever or just a bunch of inline JavaScript and it's not that way so for flux in flux we ship a JavaScript core that gives you all of these custom web elements I don't know

00:17:11 if you're familiar with custom web elements or raise your hand if You' ever heard of uh like web components or custom web elements okay so that's what these are um that the browser sort of treats them and initializes them as actual elements and so I realized like this is the story for flux this is what it should be is we'll ship to you the missing web Primitives the elements that should be in a browser that aren't and you can just use them in your flux code and you don't have to maintain all the

00:17:36 JavaScript we'll maintain the JavaScript you throw on the Tailwind classes and do whatever you want with it so that checkbox group let me show you inside uh Dev tools for a second um if I take a look at checkbox group okay so this is it yeah there's UI field there's UI everything so UI checkbox group does so much heavy lifting ARA attributes whatever wire model is directly on it cuz it works just like any other input element here's literally the actual uh element like in JavaScript memory and you can just say

00:18:07 like value equals uh email and hit enter and then the value turns into that uh you can get the value you can get and set the value it fires input events it works it's actually like kind of framework agnostic um so that's flux's JavaScript core that I'm going to oogle over and tell you a lot about because I love it just as much as everything else in flux okay uh I already showed you the code thanks for the prompt uh here's a good one check all you just throw input or you know checkbox check all and now

00:18:36 you can control that checkbox group with check all and if you've ever tried to do this it's like okay big deal it's one checkbox that just checks the other ones no no no you have to be able to like control it with those checkboxes in indeterminate States and go to empty and go back to full and it's not simple um but because we have that core it's it's simple for you so there you go I forgot to all right Rose text box or text area silly thing um sizing you size text areas with row right and then you put a

00:19:12 bunch of them in there and you want it to be bigger uh like you want it to expand automatically this is not easy it's really weird you have to do complicated things like have a mirrored div that's hidden that has the same content to get the height to set the height really weird um but CSS has this new thing called I think field sizing so you just say Rose Auto and now you have Auto sizing text area I did nothing for that so maybe Don't Clap um that's CSS give it up for CSS okay this is a bunch of components I

00:19:46 thought were lame and we shouldn't add because bring your own Tailwind like you know divs you know that stuff why do we need heading subheading text links separator spacer those are they just didn't seem like they pulled their weight but now these types of things are the things I love most about flux and I use the most and they're kind of the most compelling case for a component Library these little Tools in your tool belt so heading and subheading simple they space you know themselves right they have dark modes you don't have to

00:20:14 set those colors yourself and there's two sizes two extra sizes which is a constraint it's a nice constraint after like converting all of Hugo's figma files and sort of realizing that oh he's like very limited in the sizes that he uses and the colors that he uses so let's standardize those those into components so that you inherit those opinions and your apps start to look a little more well formed a little more a little less chaotic um but we got text we got link stuff all right separator separator is like big deal it's a div

00:20:45 it's a div with a border or a background but did you add roll separator and orientation horizontal or whatever no and when you do your vertical separator how do you do that is it height full uh but in Flex that doesn't work so is it item stretch but then if I use item stretch and I use it outside of flex it doesn't work uh so there's there are this is one of those you try to build a separator it's just harder than you want it to be uh but we did it you can make it Slimmer with my2 uh bring your own

00:21:15 Tailwind just make it Slimmer with some some margin and you can add text to it uh with text door yep separator yeah uh variant subtle variant subtle not clapping for that um all right this is like a nav bar you got two things one on the left one on the right Flex justify between of course but you want to add a notification Bell ah now we got to put a wrapping div with flex whatever between those two and then we got to have the same Gap that we had for the parent and now things are nested and I don't like them this is something that I

00:21:54 have fallen in love with spacer you just add spacer and it show it's Flex arms out and pushes stuff and it's awesome and you can you could have you could you're going to love spacer trust me all right layouts another thing I didn't think I was going to tackle and uh layouts are a stressful thing you know for anyone it's the kind of thing like is this how you feel about layouts I never want to touch them like we got it don't touch it don't add anything to it leave it alone so that was my main goal with this is is like how do I build

00:22:30 something that makes me not feel that way about my layout how do I build something that makes me feel empowered to actually change stuff that I could understand how these things work and move prepare yourself uh so I I ended up like going to every app I could took screenshots of like 30 apps and I'm trying to find the patterns like okay there's like a full width header on this one the other one's got a full height sidebar and these items are stretched here and this is that and constructing a unified uh field theory of um layouts

00:22:59 and I I think I think we got it we'll see you got flux page and flux body and this code block is rendered fully inside a flux body just a reminder it's real flux all of this is real flux so that's actually in flux body uh you add a header flux header right uh the color you have to add that yourself it's bring your own tail in for those kinds of styles cuz like you know you want to do your own color and all right this is we're just going to fill it out a little bit and just I'm just going to flash to you like things flux

00:23:29 brand uh flux Navar with nav items and icons and hre and it autod detects the current thing so you don't have to do like request is 10 times all over the little thing um lot of you know stuff whatever separator drop down spacer love the space or yep all right we're going to contract that down and uh container if you want it to not be full width you add container to header and it just does that if you want that on the body you add container and it does that or you can do it on one and not whatever you

00:24:00 want um okay let's simplify the oh so I made this longer so if the page Scrolls the header Scrolls too if you want a sticky header this is actually easy now with CSS there's position sticky but it's not easy because you have to use top and then a hard-coded value so you have to know the exact height of the header has anybody like struggled with that like sticky it's not like you want it to be easy right it's not easy four other people agree with me it's not easy you add sticky and then you just

00:24:28 get sticky and autoc calculates the height for it and it just does it sticky all right um let's simplify this down and look at sidebars you want a sidebar there's your sidebar you add sidebar style it yourself um let's fill it out all right same deal another thing again it's not layout. sidebar. brand layout. sidebar. naav bar. item. dropdown do whatever it's like no sidebar brand input nav list um yeah so you get that stuff but check this out it's like the other stuff's way at the bottom you don't want that right what do

00:25:05 you do sticky what's up sticky that's awesome um okay so yeah that one if you want the sideb to be full height right I was talking about like half the people do that the other half do this how do you how do I give you an API to do that is it a wrapping thing is it a prop uh called Full width that just feels kind of annoying what is it I thought about this and I realized we have CSS sibling selectors that allow you to detect the order of things in the markup and we use CSS grid for the layout uh so it's like header

00:25:40 sidebar body aide for a right sidebar and footer you didn't see those but whatever and if you want the header to be the main thing that's full width you put header at the Top If you want the sidebar to be full height you just switch the order and then they switch and I think that's cool all right stashable uh you didn't see that and you didn't see that if we do this it didn't stash you're on mobile you want it to stash one quick thing shout out to Hugo he's not he's he doesn't socket design so he does stuff like this in Mobile uh

00:26:11 all these click targets are bigger for our little meat Fingers um when it's big when it's desktop it's like Slimmer and sleeker but then you go mobile and touch targets are are bigger and more accessible um but yeah you want this to stash right so no problem add stashable and not when you do that it stashes automatically and what about like toggling you need those toggle buttons this is another thing it's like all right should we add five more props about toggling should we do it automatically just add the little toggle

00:26:41 buttons no just give you some components and you put them there you choose the icon you put them wherever you want and now the toggles will show up and of course you got your your inset um so there you go you got stashable sidebars toggleable stuff sticky stuff do you feel like we solved layouts anybody one person yeah I feel good about like honestly I would use flux in an app like just this part like just even the doc site I used it for I'm like oh sick you get all the sticky everything and it's

00:27:13 awesome all right uh yeah sticky everything okay tabs um Tabs are simple how do you build tabs X show or V show a button that toggles a value you know and you just check like if that value is that value well here's the thing like a lot of these things Tabs are not tabs there's tabs and then there's tabs the tabs have a big document by the W3 something Consortium something ARA something that has a big giant prescription of all these attributes that you need to have and all of this keyboard behavior and it's not simple

00:27:47 and it's a huge waste of human effort for everybody to build this themselves um so we do all that so the tabs component let me show you a concept called roving tab index uh this is a concept that you see in a lot of these typ to components where if you have 20 tabs and a user is using only their keyboard or a screen reader you don't want them to have to tab through I'm so sorry this is the same word you have to tab through 20 tabs that's annoying so what you're supposed to do is make it so that you tab only

00:28:16 the active tab is in the tab order so if I tab around it it's only that and then I use my arrow keys to navigate the tabs and what's tabbable switches that's called a roving tab index and everything in flux that should have one like menus list boxes all of them have roving tab index roving tab index give it up for something you probably didn't maybe not know or care about but is actually like the right way to do it we did it um and then also like of course the web's missing Primitives why doesn't the

00:28:46 browser have a tab element but we have it now UI tabs and UI tab group and it does all the stuff roll tabl list tab index zero ARA selected true ARA controls and assigns a random ID all these things you're just getting you're massively leveling up the accessibility of your apps for keyboards and Screen readers just by using flux you just get it all right yeah uh tab group this is a fun one uh you can I don't know it's fun to me you can use a tab group without all the panels and it's like still right there's

00:29:21 roll TBL list um so you can just do that and then control it however you want so you could add wire model it's wire modelable and then have access to that and then like a multi-step form now you can control what the contents are and still have a nice tab list with all the stuff uh a variant segmented nice little variant I use it now just as much as the normal variant and here's a little design detail so the background of this is slightly transparent or majorly transparent um for good reason what we

00:29:50 started with was hardco colors because they look better you can control them better but flux is like a a more like generalized thing I don't want to restrict you to using a white background for things to look good you want to be able to use any background so the top is what we have the bottom is what we used to have but now everything in flux that we can do this to we did do this to so if you change the background it won't get washed out it won't just disappear um yeah and it works with dark mode

00:30:23 y little touches little touches that aren't on my radar and then Hugo shows me and I go that's great and obvious thank you Hugo um all right here's another little one you look at these These are both 40 pixels cuz we make sure that everything is the same pixels if you're going to put them in a bar it's 40 pixels but you look at this and the right one looks smaller because it's got like it's like inset a little bit um so we also do Optical alignment so V like optically they're not the same height but like technically they are um

00:30:50 so we just adjust it get ready big reveal coming big reveal yeah did you see it yeah I'm going to do that again there it is pretty beautiful and it doesn't take up more space we use negative margin it just expands visually um okay so my quest so that's the easy stuff my quest I know my quest for the past seven years it's not been uh making web development easier for people or whatever it's not a noble Quest it's an embarrassing Quest truly The Arc of my career has been trying to build a drop-down menu like the whole time that

00:31:30 is literally encapsulates the struggle is building a drop down menu and it is so deflating I worked on flux so hard and I had an aunt and uncle over who said let me see what you're working on oh all right I'll show you here it is and they're they just say look I'm just like what why you spent and then you no no trust me this is the hardest thing in web development like it's I swear it's so hard and okay that's literally uh yeah so that's the quest I've been on I wrote an entire JavaScript framework to make dropdowns

00:32:06 easier for real it's called Alpine JS this is the homepage a dropdown menu it's not a drop-down menu people have told me it's not this is the this is the Alpine homepage drop down menu it drops down but it does nothing else you can't click away you can't hit Escape it has nothing Arya anything it's not a drop- down menu so okay uh this isn't a dig on Alpine every framework's like this you have to do it all yourself right so you can do it all yourself you can add a ton of stuff key on this ARA that and then

00:32:36 you get something that kind of works Escape whatever but you put so much effort into this you read up on all the stuff and then you met position relative and overflow hidden these two things together will destroy your beautiful drop- down menu every time no matter how hard you try no matter how high your zindex is you cannot escape the gravity of position relative and overflow hidden and it hurts it hurts us the working man who's not using who's not using react and isn't portaling everything everywhere with

00:33:15 like a whole new rendering layer and whatever it's like we're just simple folk with HTML trying to make a living right but we've prayed and our prayers have been answered the browser gu gods have delivered to us popover clap for popover this is honestly like the coolest thing to come to browsers in a good long while I'm so stoked about it you add a button pop over Target and then something with pop over and watch this it's still you see the orange thing still has the Overflow bam it goes outside of it it's so you guys are like

00:33:53 but that doesn't look right um yeah well I'll just skip that for a second um so what's happening here with this popover it's escaping the Overflow hidden because popover is rendered in the top layer if you open up the dev tools it's on an entirely new rendering level that's above Z index entirely this rendering layer was only reserved for like full screen video so that your popovers didn't show up in front of it but now we have access to it with popover and with dialogue but what you saw oh and it's got like all this stuff

00:34:28 you want click away Escape only one open at a time nesting works great it's awesome you can focus in and then Escape out and it'll return Focus to what was focused before it's awesome uh but it's it's not positioned at all because you can't position it relative to anything because it's in the top layer it has no idea so you have to use a library like floating UI it's the new popper JS it's our one dependency and they're awesome so thank you floating UI um let me show you briefly we're going to come back to

00:34:56 that in a second so you can do this yourself you could do it but we added a few you know nice wrappers so you have flux drop down and then the first child is a button any button just it has to be a button element and the second child is anything with popover and then you have a drop- down menu that anchors and does all the stuff um yeah yeah yeah quick little yeah just get it out you know just uh all right so we got position you position that however you want and this is all using floating UI and floating UI

00:35:27 takes care of so CSS is going to get anchor positioning probably by next year we'll just be able to use CSS to do this part um but yeah if it's about to go off the page it'll automatically put it on the other side so you're never going to overflow um it's really smart uh it's a great it's a great Library yeah woo um all right so that's a drop down but it's not a drop- down menu this is why I said I was going to do a whole talk about hamburgers or whatever hot dogs and drop down menus um yeah so it's not a drop-

00:35:55 down menu it's not a system menu so remember you pull up the big you know the scroll of ARA what to do for what and there's a thing called Roll menu for system menus if you go to this top bar this is a system menu in the OS you can use the arrow keys you can hit like R and it'll go down to the next thing that starts with r it has a lot there for you that a normal like nav you know navigation popover with a tags doesn't have so when you're using a system menu on the web and you want like an edit and

00:36:24 a delete and a view button uh we give energy saver on thank you thank you energy conscious so I hit next and now we have flux menu so I'm also pumped about this because it's composable it's not again drop down. rapper drop down. trigger drop down. button drop down. panel drop down. overlay you know it's like drop down button menu um and this menu does all those things you have Arrow navigation focus is roving in here but you can't see it I can hit B and it'll go to Bar uh Escape it'll focus back all those things we have checkboxes

00:36:59 you can have menu item checkbox and radio groups in your dropdowns that you can easily wire model bind to and it's not hacky there's Roll menu item checkbox and Roll menu item radio in the HTML um yeah this is a full drop down they go wild honestly this is the part where I abandoned what I was doing and started out a whole new course with a new with all the new JavaScript stuff with those components because I needed submenus and checkboxes and all this stuff and was like a lot of libraries don't offer this stuff because it's hard

00:37:28 but we do so you got everything you need in a drop- down menu submenus clickable submenu thingies you could have 20 levels deep submenus although you're not supposed to and it's menu item separator submenu radio group radio whatever lot of drop- down stuff are you impressed by the drop down okay cuz my uncle and Aunt were not impressed um all right so that flux menu you can just instead of wrapping it in dropdown you can wrap it in context and then have some click Target now it's a context menu so the same exact menu and

00:38:01 you can just right click and then you get a context menu context menu all right well you're all pumped and warmed up this is the final thing that I wanted to add to drop downs and I'm stoked about it if you go here and you go to this drop this submenu oh this is so stressful I'm sweating with my jittery talk hands how do I get over here ah you know you want to just be able to over there and it works we have safe areas so they're rendered you don't normally see them but I threw some CSS on them and

00:38:29 now we have safe fairies if you pause in the middle they'll drop down what do you think yeah yeah now does it add a little bit of perspective when I'm like look at this drop- down menu and they're like what all right modals we got those we use the dialogue element for modals it's in browsers now and it's awesome for a bunch of reasons but here's a basic modal you have modal you give it a name and you have modal trigger and I'm doing this kind of separate thing because you don't always want to Nest the trigger

00:39:04 inside the modal you might want to share a modal or whatever um so we click this you get the modal it looks great and again it's only a dialogue element and here's you get a lot for free with this a lot of accessibility stuff a lot of tab Behavior but my one of my favorite things about it is that it's a single element for the model if you make your own models you know that there's an element for the backdrop an element for generally the wrapper and then an element for like the panel and that it's

00:39:28 just elements on elements so if you wrap it inside a blade component like this modal you and you want to add a class like change the Border radius it's like how do we know which element to put that border radius on it's difficult so oh do we give them three components they have no it's one element and I just love it because it's so clean and simple it's literally uh somewhere it is if you open it and then look at it this is dialogue so that is the entire element the Border radius on it the Shadows on it and

00:40:00 whatever I like it all right there's a variant called fly out just a bunch of styling differences you can Nest them yeah yep uh so sweet most of that clap is for dialogue element honestly that was like probably the easiest uh component of all these like easier than even stuff that you would think should be easy so this is Select you got to have selects right and they got to be full width full width by default baby select select option um you know basic stuff whatever but the number one thing that I have been uh requested of

00:40:35 course people everybody's like how do you select two in liveware I'm always like okay I could show you and again this is one of those things it's like what are we are we going to wrap up one of these like 800 kilobyte JavaScript libraries for a select menu that doesn't work half the time for certain things and you know and like no we're not going to do that so we have custom selects and flux and they are handwritten at every level and I am so stoked about the custom select you add custom to select

00:41:02 and you get select trigger options and option and now these are just elements you can style them however you want so if I click this it looks like a select but it's custom you may have heard it called like a list box or something but there's like naming a select is brutal like combo box pill box select select multiple custom select it's like what do you call it um so it's just select and if it's your own custom thing it's custom and uh thank you deco and Chris Morel we had an emergency call on Friday

00:41:30 for hours to figure out the best naming for the apis um so yeah so it's styling you can like add stuff like styling and make it whatever you could add avatars and style it however you want um let me show you some other stuff so if you want to make this this is really rad check this out you add searchable bam now it's searchable yeah you want it multi- searchable multiple done yeah get it going again while I'm typing nobody clapped where's my crew I had an agreement um okay so yeah and now you want to like a pill box or something you

00:42:09 just say pills you say spills pills and now you got pill box searchable pill box and all of this is not rigid it is composable you could change pills you could make your own component it's so flexible there's UI combo box under the hood that has like very specific thing it's super super flexible and composable it's just a button element literally trigger this trigger could be anything like if I put like button trigger what why that's not a th what trigger um and I think yeah okay hit save and there you go so now you have a

00:42:51 not full width but you know I know you wanted it to be full width but yeah it's just like it's just a button it's that first child trigger second child Target pattern that I've fallen in love with uh so that's select um I I don't know that's they're great all right uh you can expand that same combo box element under the hood but now you got you know command pallets um let's soup it up this is the command command input command items bunch of items you go bam let's add some icons add some keyboard hints

00:43:19 uh put it in a modal put a modal trigger get a shortcut key to trigger that modal get an input render it as a button give it an icon give it some keyboard hints and now you got a six command pallet that you can like search and yeah add wire click generate this stuff from the server like you know do whatever you want like this is this is huge stuff that I wanted to nail and all of it is handwritten yeah all that JS right like you have chosen select two some input masking Library this thing is megabytes of JavaScript you go to these

00:43:47 other component libraries megabytes of other people's JavaScript this is our JavaScript except floating UI thank you floating UI and all of it all of it broadly minified is 16 kilobytes for everything and you saw like you didn't even see it like we got stuff toasts everything um yeah and all that so this okay that's flux 16 kilobytes but then on your Live Wire app you have Alpine and all of Alpine's plugins and live wi's JavaScript and all of that still is less than 100 kilobytes for that they have download Once like it's just feels

00:44:20 so clean um yeah so this is what you get with flux you get accordion autocomplete badge breadcrumbs button card checkbox command cont text drop down field heading subheading text link icon input Page Body Side Bar header a side footer brand profile Navar nav list nav menu modal radio select separator spacer switch table tabs texter and Tool tip uh that's not a route anymore that was the now you know the password for Artisan down uh this is flux uh you can go to flux right now flux u.d you can pre-order it it's 99 bucks per project

00:44:58 that's our Early Access pricing I'm going to launch it full 1.0 next week it's not going to be beta it's going to be 1.0 you'll be able to put it in your projects use it in production next week go pre-order it thank you for watching all right oh dude perfect hey it's almost like we practiced um okay so question you said you spent 9 months building this should we do a Q and A shut up please don't we have literally 8 seconds um we uh you said you spent 9 months building this yeah how many times did you build a discret version of this

00:45:40 how many times did you start over oh yeah yeah the JavaScript stuff I scrapped like H or um yeah Sebastian Dana knows the journey it was Data attributes forever it was web components that were styled it was so many things completely scrapped and rebuilt yeah a lot so is that part of why kept your head down cuz you're like I'm going to build it and then I hate it yes and I'm going to build it again and then I hate it and you weren't sure you were going to get to a spot that you like weird right like you're like dragging

00:46:05 everybody along like this is so awesome and then you feel like you said that and it's nice to be able to just back out of a bad idea and not tell anyone and nobody thinks a thing I don't know and it's fun to have your head down and just then just come up with something you know well yeah everybody give it up for Caleb porio