All Projects → petalframework → petal_components

petalframework / petal_components

Licence: MIT License
Phoenix Live View Components

Programming Languages

elixir
2628 projects

Projects that are alternatives of or similar to petal components

Analytics
Simple, open-source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
Stars: ✭ 9,469 (+6761.59%)
Mutual labels:  phoenix, tailwindcss
vitawind
Install and Setting Tailwindcss automatically for Vite
Stars: ✭ 46 (-66.67%)
Mutual labels:  tailwindcss
BearNecessities
Multiplayer bear game with Phoenix Live View
Stars: ✭ 19 (-86.23%)
Mutual labels:  phoenix
helpafamily
Impactful ways to help families in need through donated meals, hygiene kits, and more. By Margarita Humanitarian Foundation.
Stars: ✭ 41 (-70.29%)
Mutual labels:  tailwindcss
outline
Outline is a web component based design system starter kit. Outline is based on the latest technologies and tools to help your component authoring experience and facilitate adoption in your organization.
Stars: ✭ 28 (-79.71%)
Mutual labels:  tailwindcss
next-pwa-template
Next.js progressive web app template
Stars: ✭ 266 (+92.75%)
Mutual labels:  tailwindcss
Personal-Site-Gourav.io
My personal site & blog made with NextJS, Typescript, MDX, Tailwind CSS. Deployed on Vercel : https://gourav.io
Stars: ✭ 64 (-53.62%)
Mutual labels:  tailwindcss
game of life-elixir
An implementation of Conway's Game of Life in Elixir
Stars: ✭ 22 (-84.06%)
Mutual labels:  phoenix
rails-starter-template
Opinionated Rails starter template using esbuild, tailwindcss, postgresql and hotwired.
Stars: ✭ 21 (-84.78%)
Mutual labels:  tailwindcss
markushatvan.com
Personal website and blog written from scratch with SvelteKit and TailwindCSS.
Stars: ✭ 82 (-40.58%)
Mutual labels:  tailwindcss
nextal
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Stars: ✭ 88 (-36.23%)
Mutual labels:  tailwindcss
norman-portfolio
Norman Nuthu's Portfolio
Stars: ✭ 16 (-88.41%)
Mutual labels:  tailwindcss
sapper-postcss-template
A template that includes Sapper for Svelte and PostCSS preprocessing with Tailwind CSS
Stars: ✭ 84 (-39.13%)
Mutual labels:  tailwindcss
vite-react-ts-tailwind-firebase-starter
Starter using Vite + React + TypeScript + Tailwind CSS. And already set up Firebase(v9), Prettier and ESLint.
Stars: ✭ 108 (-21.74%)
Mutual labels:  tailwindcss
tailpress
A Tailwind CSS enabled Underscores theme
Stars: ✭ 60 (-56.52%)
Mutual labels:  tailwindcss
linearapp clone
A Linear App clone with React and Tailwind CSS
Stars: ✭ 125 (-9.42%)
Mutual labels:  tailwindcss
one plus n detector
Elixir library to help you detect 1+n queries in applications using Ecto
Stars: ✭ 20 (-85.51%)
Mutual labels:  phoenix
vue-3-stackter
A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences. Also, there is a TypeScript branch of this same setup.
Stars: ✭ 93 (-32.61%)
Mutual labels:  tailwindcss
vue-apicloud-cli
基于vue的APICloud脚手架
Stars: ✭ 44 (-68.12%)
Mutual labels:  tailwindcss
wrapped
GitHub Wrapped, inspired by Spotify Wrapped
Stars: ✭ 159 (+15.22%)
Mutual labels:  tailwindcss

Petal Components

DEMO

Petal is a set of HEEX components that makes it easy for Phoenix developers to start building beautiful web apps.

About

Petal stands for:

Some components like Dropdowns require Javascript to work. We default to Alpine JS (17kb) but you can choose to use Phoenix.LiveView.JS as an alternative (though this will only work in live environments like live views or live components).

Documentation

For full documentation, visit petal.build.

Roadmap

Layout

  • container

Form components

  • text input
  • select dropdown
  • textarea
  • checkbox
  • radios
  • errors
  • labels
  • file upload
  • text variants (email, password, tel)
  • color input
  • range input
  • time, datetime, & date input
  • multiple select
  • switch

Buttons

  • basic button
  • change size
  • change color
  • loading state (with spinner)
  • filled vs outline
  • button group

Misc

  • menu dropdown
  • tooltips
  • avatar
  • alerts
  • tables
  • cards
  • breadcrumbs
  • modal
  • slide over
  • spinners
  • accordian
  • pagination
  • badges
  • progress
  • links

Contributing

Feel free to open a Github issue in this project.

If you'd like to help out we've got a Phoenix umbrella app that allows you to easily contribute to Petal Components (which is installed as a git submodule).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].