Skeleton Labs
Skeleton Labs
  • 22
  • 42 764
skeleton v3 Beta - Migration Guide
0:00 Skeleton v3 Beta Announcement
2:25 Migration Guide Overview
3:05 Intro to the Migration Project
6:08 Preparing To Migrate
8:41 Prerequisites
10:27 Implementing the Prerequisites
12:45 Update to Svelte 5
15:19 Update project dependencies
18:46 v3 Dependency Updates
21:16 Tailwind Config Updates
24:17 Starting the Dev Server
25:15 Updating Preset Themes
25:52 Updating Custom Themes
27:37 Replace AppShell with Layouts
33:10 Homepage Features Fixes
38:04 Global Styles Adjustments
45:28 Migrate Variants to Presets
50:47 Migrate the Accordion Component
55:43 Add Theme Color to SVG Image
56:59 Homepage Refinements
1:03:06 Migrating Color Pairings
1:06:04 Migrating the Avatar Component
1:08:46 Fixing Service Cards
1:11:30 Replacing List Elements
1:12:57 Migrating Card Elements
1:15:10 Migrating Input Elements
1:19:10 Testing Light Mode
1:21:11 Migration Guide Review
1:26:44 Reviewing Component Changes
1:30:42 Removed or Replaced Features
1:32:51 Wrapping Up
v3 Beta Announcement:
github.com/skeletonlabs/skeleton/discussions/2919
V3 Beta Migration Guide:
github.com/skeletonlabs/skeleton/discussions/2921
#tailwindcss #tailwind #svelte #sveltekit #react #webdevelopment #ui #css #javascript #components
Переглядів: 3 321

Відео

Skeleton Next - Update 14 - Theme Generator Overhaul
Переглядів 213Місяць тому
View the written post which covers this update in detail: github.com/skeletonlabs/skeleton/discussions/2871
Skeleton Next - Update 13 - Components, Docs, and Themes
Переглядів 267Місяць тому
Progress update post: github.com/skeletonlabs/skeleton/discussions/2861
Skeleton Next - Update 9 - Doc Search, Gradients, and Switch
Переглядів 9285 місяців тому
Learn more about Skeleton v3 here: next.skeleton.dev/ In today's video we cover follow up questions to the recent pre-release, showcase the new doc search feature, cover the new Gradient options, and introduce the new Switch component. Floating UI Svelte: - Website: floating-ui-svelte.vercel.app/ - TWIS Interview: ua-cam.com/video/edoYKNgUQQI/v-deo.html
Floating UI Svelte Pre-Release Announcement
Переглядів 2,9 тис.5 місяців тому
We're thrilled to announce the first public pre-release version of Floating UI Svelte is now available. Install and try it today! Read the Announcement: github.com/skeletonlabs/floating-ui-svelte/discussions/113 Learn more at: floating-ui-svelte.vercel.app/
Skeleton v3 Pre-Release Announcement 🎉
Переглядів 4,2 тис.6 місяців тому
That's right, Skeleton v3 is now publicly available for you to try out and use directly for both Svelte 5 and React! 0:00 Introduction 1:45 Install for SvelteKit 10:08 Themes and Dark Mode 12:45 Design System 18:47 Tailwind Elements 27:26 Components Overview 38:42 Cookbook 40:12 Install for NextJS 43:34 React Walkthrough 47:33 Conclusion Full Announcement: github.com/skeletonlabs/skeleton/discu...
Floating UI Svelte announcement!
Переглядів 12 тис.6 місяців тому
View the full announcement: github.com/skeletonlabs/floating-ui-svelte/discussions/50 Links: - Website: floating-ui-svelte.vercel.app/ - GitHub: github.com/skeletonlabs/floating-ui-svelte Interested in contributing? Reach out on the "#floating-ui-svelte" channel on the Skeleton Discord: discord.gg/EXqV7W8MtY
Skeleton Next - Update 3 - Documentation Expansions
Переглядів 1666 місяців тому
Follow along with previous updates here: github.com/skeletonlabs/skeleton/discussions/2375
Skeleton Next - Update 7 - New Components and Animations
Переглядів 1,3 тис.6 місяців тому
Learn more about Skeleton v3: github.com/skeletonlabs/skeleton/discussions/2375 In today's video we'll cover some new documentation updates, new components added, and deep divide into how animations will work for components in Skeleton v3.
Skeleton Next - Update 8 - Popovers
Переглядів 1856 місяців тому
Read more here: github.com/skeletonlabs/skeleton/discussions/2629
Skeleton Next - Update 8 - Modals
Переглядів 2066 місяців тому
Read more here: github.com/skeletonlabs/skeleton/discussions/2629
Skeleton Next - Update 6 - Plugin, Docs, and Figma
Переглядів 2627 місяців тому
Learn more: github.com/skeletonlabs/skeleton/discussions/2375
Skeleton Next - Update 5 - Theme Generator
Переглядів 2627 місяців тому
Learn more at: github.com/skeletonlabs/skeleton/discussions/2375 Try the generator: themes.skeleton.dev/ Preview our newest themes: www.skeleton.dev/
Skeleton Next - Update 4 - Components & Props
Переглядів 2818 місяців тому
Learn more about how components and properties are being updated for Skeleton v3.
Skeleton Next - Update 2 - Themes & Plugin
Переглядів 4009 місяців тому
Covers a variety of updates coming in the next major version of the Skeleton plugin. This includes theme updates, visual aesthetic updates, and more.
Skeleton Next - Update 2 - Documentation
Переглядів 2249 місяців тому
Skeleton Next - Update 2 - Documentation
Skeleton Next - Update 1 - Code
Переглядів 18810 місяців тому
Skeleton Next - Update 1 - Code
Skeleton Next - Update 1 - Design
Переглядів 1,4 тис.10 місяців тому
Skeleton Next - Update 1 - Design
Skeleton - What's Coming in Next (v3.0)
Переглядів 1,6 тис.10 місяців тому
Skeleton - What's Coming in Next (v3.0)
What is Skeleton?
Переглядів 10 тис.Рік тому
What is Skeleton?

КОМЕНТАРІ

  • @andrew.derevo
    @andrew.derevo 11 днів тому

  • @skeletonlabs
    @skeletonlabs 13 днів тому

    Here's the final result for anyone curious! www.skeletonlabs.co/

  • @rudrapratapsingh888
    @rudrapratapsingh888 14 днів тому

    great news !!

  • @imalkesara4466
    @imalkesara4466 16 днів тому

    💌

  • @couffin
    @couffin 16 днів тому

    Lets gooooo! 💢 thank you guys, I'm absolutely enjoy this project! hope i will be able to contribute in future!

  • @keikuka
    @keikuka Місяць тому

    The import feature - serious value shipped! Thank you so much gentlemen!

  • @andgatehub
    @andgatehub Місяць тому

    It's so cool to see how skeleton has evolved. Looking forward to migrating my little project

  • @debadipti
    @debadipti Місяць тому

    Nice update! I am planning to use this for my next project

  • @CitizensCommunity
    @CitizensCommunity Місяць тому

    Please keep making these videos, they are so very helpful.

  • @P1aenkl3r
    @P1aenkl3r Місяць тому

    I look forward to seeing the progress every time! Keep up the great work:D

  • @sureshmutluru4532
    @sureshmutluru4532 Місяць тому

    Waiting for the stable release

  • @bimbim1862
    @bimbim1862 3 місяці тому

    myCustomTheme error have tutorial?

  • @couffin
    @couffin 3 місяці тому

    great job!

  • @engineererick
    @engineererick 3 місяці тому

    Hi! nice video :) I would like to know if is possible to remove gradient background and how

  • @axelb423
    @axelb423 4 місяці тому

    Awesome, can you make so that the theme generator can be used on any Svelte site please?

  • @azaleadev
    @azaleadev 4 місяці тому

    Would love this if it didnt remove the AppShell. That was one of the things I really liked about Skeleton. Please add some kind of alternative

  • @williamclark4143
    @williamclark4143 4 місяці тому

    Loving the Svelte5 Support, surely in the future we get a VS Code plugin please for your awesome UI

  • @debadipti
    @debadipti 4 місяці тому

    Appreciate the hard work you doing! Great job 👏

  • @prashlovessamosa
    @prashlovessamosa 5 місяців тому

    Thanks 🙏

  • @sncheng1771
    @sncheng1771 5 місяців тому

    the voice volume is great! now thank you.

    • @skeletonlabs
      @skeletonlabs 5 місяців тому

      Awesome! Thanks for letting me know!

  • @IStMl
    @IStMl 5 місяців тому

    Do you by chance plan on doing a Solid port in the future (considering code is quite close to React) ?

    • @skeletonlabs
      @skeletonlabs 5 місяців тому

      This is Chris responding - honestly the next framework won't necessarily be my decision, but rather decided by both the team and community. Vue seems highly likely given the established user base. But personally speaking I'd be down for Solid at some point. I think Solid is cool and Ryan Carniato is doing some great work in the JS ecosystem. There's a reason everyone's adopting Signals!

  • @mikejohneviota9293
    @mikejohneviota9293 5 місяців тому

    will it support common graphs like bar and line graphs???

    • @skeletonlabs
      @skeletonlabs 5 місяців тому

      Hey Mike, I meant to address this in the video! In Skeleton v2 we had a similar feature called the "Conic Gradient", which was multi-purpose. It could both draw CSS conic gradients as well as create simple data visualizations, like pie charts. In v3 we've now moved gradient rendering to Tailwind (for spinners, text, etc as shown). Then we're going to lean into providing an integration guide for a proper data viz library like Chart.js. We think this will provide much more depth and flexibility while still allowing you to integrate with Skeleton design systems.

    • @mikejohneviota9293
      @mikejohneviota9293 5 місяців тому

      @@skeletonlabs wow this is fantastic!! hope it's easy to use 😅

  • @juanpablobeltran6198
    @juanpablobeltran6198 5 місяців тому

    Awesome! I have a question, is the AppShell gonna be obsolete for ever?

    • @skeletonlabs
      @skeletonlabs 5 місяців тому

      We explain on the v2 doc site page for App Shell, but it'll remain in v2.x but not carry forward to v3. We'll provide an alternative that better takes advantage of each framework we support.

  • @mikejohneviota9293
    @mikejohneviota9293 5 місяців тому

    hoping it was easy like shad cn svelte

  • @ValipPowa
    @ValipPowa 5 місяців тому

    I'm hyped for v3 especially the fact how the progression is going. thank you guys!

  • @Jake-bh1hm
    @Jake-bh1hm 5 місяців тому

    Would love to see some audio components.

    • @skeletonlabs
      @skeletonlabs 5 місяців тому

      Yeah, we've been considering the same. I video and audio element styling are often overlooked by UI libraries. Feel free to file a feature request on GitHub and we can take a look. I can't promise anything prior to launch, but we definitely have a list of new components and features we hope to introduce over time.

  • @Jake-bh1hm
    @Jake-bh1hm 5 місяців тому

    Good stuff!!!

  • @CitizensCommunity
    @CitizensCommunity 5 місяців тому

    This is the future.

  • @CitizensCommunity
    @CitizensCommunity 5 місяців тому

    This looks awesome.

  • @ValipPowa
    @ValipPowa 6 місяців тому

    Thank you and thanks to everyone who worked on skeleton they truly are bridging the gap between Svelte simplicity and UI packages they are truly one of a kind. starting from 0 with no knowledge on web development the fact just a couple weeks of testing skeleton while also learning sveltekit can give me PRETTY decent results is very crazy compared to probably other frameworks and packages

  • @P1aenkl3r
    @P1aenkl3r 6 місяців тому

    I like the predetermined structure that the AppShell has provided so far. Will there be an alternative for this?

    • @skeletonlabs
      @skeletonlabs 6 місяців тому

      A major shift in v3 is we're moving to be multi-framework (Svelte and React initially) while also adding support for multiple app frameworks (Kit, NextJS, Astro, etc). Layouts are handled very differently between these, so we're taking the stance that folks should implement custom layouts directly. That said, we do plan to provide some guidance around common layout patterns to help smooth the transition - providing canned HTML/CSS for this. Additionally, there's a whole host of issues with the current AppShell. While simple to get started, we don't feel like the trad-offs are really worth it for production applications. See a few of these detailed here: github.com/skeletonlabs/skeleton/issues/2383

  • @mikejohneviota9293
    @mikejohneviota9293 6 місяців тому

    can't wait

  • @sncheng1771
    @sncheng1771 6 місяців тому

    CookBook is wonderful!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @P1aenkl3r
    @P1aenkl3r 6 місяців тому

    Fantastic I have recently started using Skeleton you are doing a great job keep up the good work

    • @skeletonlabs
      @skeletonlabs 6 місяців тому

      Thank you for your support!

  • @sncheng1771
    @sncheng1771 6 місяців тому

    The video voice are too low.

    • @skeletonlabs
      @skeletonlabs 6 місяців тому

      Sorry about that. I have a good quality mic and it's right in front of me, but I think the video capture software I'm using has reverted my audio settings. I'll check into this for my next video. Auto-generated captions should be available if that helps! Just tap the small "CC" (closed captions) button in the bottom-right corner of the video.

    • @justinoneill2837
      @justinoneill2837 6 місяців тому

      yeahh it's really low on this end too

  • @sncheng1771
    @sncheng1771 6 місяців тому

    Need Figma!!!!!!!!!!!!!!

  • @ThingEngineer
    @ThingEngineer 6 місяців тому

    Sweet!

  • @FlintBits
    @FlintBits 6 місяців тому

    seems like a lot to abstract away popover

    • @skeletonlabs
      @skeletonlabs 6 місяців тому

      Hey Flint, we think of Floating UI Svelte as an intermediate abstraction of Floating UI. We expect folks will be keen to handle their own local abstraction around the primitives we provide to handle, creating dedicated components for popovers, tooltips, modals, context menus, and more.

  • @skeletonlabs
    @skeletonlabs 6 місяців тому

    The video has been updated to include timestamped chapters!

  • @keikuka
    @keikuka 6 місяців тому

    You guys are awesome - thank you so much!

  • @Dhalucario
    @Dhalucario 6 місяців тому

    I am glad you guys are releasing a new version, I just find it kinda frustrating that Svelte 5 is required. Especially since it seems like there is still so much to do before Svelte 5 becomes stable and there is no ETA.

    • @skeletonlabs
      @skeletonlabs 6 місяців тому

      In case you missed it, Svelte 5 hit Release Candidate status at the recent Svelte Summit. Meanwhile we're on the other end, this is our first public release (think public beta), so we're confident they'll hit stable release prior to us. I wouldn't stress too much about this.

    • @Dhalucario
      @Dhalucario 6 місяців тому

      ​@@skeletonlabs Thank you for clarifying. I use Skeleton in a bunch of codebases and was worried already.

  • @HunterBBQ
    @HunterBBQ 6 місяців тому

    congrats

  • @memestagestartup
    @memestagestartup 6 місяців тому

    What does that mean? Is it like svelte 5 announcement of release candidate?

    • @skeletonlabs
      @skeletonlabs 6 місяців тому

      Release candidates are provided immediately before release, this is the opposite - the first public pre-release (think public beta). Things are early, features are missing, and it's not advised for production. But should be in a functional enough state to test and provide feedback.

  • @mikejohneviota9293
    @mikejohneviota9293 6 місяців тому

    omg 🎉🎉🎉🎉

  • @markobogosavljevic1174
    @markobogosavljevic1174 6 місяців тому

    Love this!

  • @luxusAI
    @luxusAI 6 місяців тому

    yey svelte5 support.. loving it

  • @isaacdruin
    @isaacdruin 6 місяців тому

    Let's gooooo!

  • @Jake-bh1hm
    @Jake-bh1hm 6 місяців тому

    Awesome, I love the svelte 5 integration!!!

  • @mikejohneviota9293
    @mikejohneviota9293 6 місяців тому

    omg this dude save me i was using skeleton for so long before shadcn came