More Premium Hugo Themes Premium Tailwind Themes

Salad_ui

Phoenix Liveview component library inspired by shadcn UI

Salad_ui

Phoenix Liveview component library inspired by shadcn UI

Author Avatar Theme by bluzky
Github Stars Github Stars: 868
Last Commit Last Commit: May 23, 2025 -
First Commit Created: Aug 27, 2024 -
default image

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:

  1. Add SaladUI to your list of dependencies in mix.exs:
    {:salad_ui, "~> 0.1"}
    
  2. Customize colors by visiting https://ui.shadcn.com/themes and following the provided instructions.
  3. Create a new file tailwind.colors.json in your assets directory.
  4. Configure Tailwind to extract classes from SaladUI and install Tailwind CSS plugins.
  5. Develop SaladUI by cloning the repo and starting Storybook.
  6. Ensure dependencies are installed in your project folder by running mix deps.get.
  7. Run tests using mix test or mix test.watch.
  8. 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.