Salad_ui

Theme by Bluzky

Updated: 23 May 2025

868 Stars

Phoenix Liveview component library inspired by shadcn UI

Overview:

The SaladUITestsModule is a library aimed at porting the shadcn UI to Phoenix Liveview Component. It is still in its early stages, with potential breaking changes in minor releases until version 1.0. The library offers a variety of components for UI development and provides a demo at a provided link.

Features:

Custom Color: Easily add custom colors to your app.css file.
Tailwind Configuration: Configure Tailwind CSS to integrate with SaladUI.
Development Environment: Instructions on setting up and developing with SaladUI locally.
Unit Testing: Guidelines for running tests and maintaining code quality.

Installation:

To install SaladUI, follow these steps:

Add SaladUI to your list of dependencies in mix.exs:
```
{:salad_ui, "~> 0.1"}
```
Customize colors by visiting https://ui.shadcn.com/themes and following the provided instructions.
Create a new file tailwind.colors.json in your assets directory.
Configure Tailwind to extract classes from SaladUI and install Tailwind CSS plugins.
Develop SaladUI by cloning the repo and starting Storybook.
Ensure dependencies are installed in your project folder by running mix deps.get.
Run tests using mix test or mix test.watch.
Format your code with mix format before submitting pull requests.

Summary:

SaladUITestsModule offers a promising approach to incorporating shadcn UI into Phoenix Liveview Component. The library is under active development, and users can expect enhancements and adjustments in upcoming releases. With a variety of components available and clear installation and development instructions, SaladUI presents a valuable tool for UI development projects.