dev-resources.site

for different kinds of informations.

Phoenix Liveview components for Shadcn UI

Published at

5/19/2024

Categories

elixir

phoenix

liveview

Author

bluzky

Main Article

https://dev.to/bluzky/phoenix-liveview-components-for-shadcn-ui-2fal

Categories

3 categories in total

Author

6 person written this

Phoenix Liveview components for Shadcn UI

I'm a fan of Shadcn UI library for its neat and clean components. Recently, I'm playing with Phoenix Liveview components, and I though why don't I port Shadcn UI to Phoenix Liveview.

My goal is keeping the tags as much similar to original library as possible. And not to build wrapper components as default generated CoreComponents.

Here is a sample page that ported:

And the result is what you can found on https://salad-storybook.fly.dev/.

GitHub repo:

bluzky / salad_storybook

Phoenix liveview components inspired by shadui

SaladStorybook

Salad UI is a collection of phoenix live view component inspired by shadui Currently these components are under heavy development and cannot be used as separated library.

Demo

How to start Story book.

Clone this repository
Clone https://github.com/bluzky/salad_ui at the same directory with this repo
Install node modules

cd assets && yarn

Install dependency & start

mix deps.get
mix phx.server

Now you can visit localhost:4000 from your browser.

List of components

It's still my experiment and not ready for production. You can play with it and share your feedback, that would help me a lot.

Thanks.

phoenix Article's

30 articles in total

Pseudolocalization in Phoenix with gettext_pseudolocalize

Unlocking the Power of Elixir Phoenix and Rust: A Match Made for High-Performance Web Applications

Sql commenter with postgrex

Phoenix LiveView is slot empty?

Bridging the Gap: Simplifying Live Component Invocation in Phoenix LiveView

Find and Fix N+1 Queries Using AppSignal for a Phoenix App in Elixir

Managing Distributed State with GenServers in Phoenix and Elixir

Complete Guide: Setting up VS Code for Elixir and Phoenix Development

A Complete Guide to Phoenix for Elixir Monitoring with AppSignal

Better LiveView Hooks with Typescript

Scaling Your Phoenix App in Elixir with FLAME

Running Elixir Phoenix on Windows

How to use gettext in phoenix?

Custom Instrumentation for a Phoenix App in Elixir with AppSignal

Building a Table of Contents Component for a Phoenix Blog

Mastering Phoenix Framework - Part 2

Mobile app development with LiveView Native and Elixir. Part - 3

How to integrate Tabler Icons into your Phoenix project

Mobile app development with LiveView Native and Elixir. Part - 2

Mobile app development with LiveView Native and Elixir

(Unofficial) Getting Started with Elixir Phoenix Guide

Using Ecto (without Db) for validating Phoenix form

API Prototypes with dbb: Another step to better prototypes

Adding stream_async() to Phoenix LiveView

SaladUI - Implement avatar component for Phoenix LiveView

Connectivity status with Phoenix LiveView

Taming data with Ecto.Enum and Ecto.Type

ecto's cast/4 function explained

Phoenix Liveview components for Shadcn UI

currently reading

How to run a local Phoenix app on another machine

Featured ones:

abubakersiddique761