https://github.com/wolfadex/elm-radix-ui
radix-ui.com in Elm
https://github.com/wolfadex/elm-radix-ui
Last synced: about 1 year ago
JSON representation
radix-ui.com in Elm
- Host: GitHub
- URL: https://github.com/wolfadex/elm-radix-ui
- Owner: wolfadex
- Created: 2024-04-17T21:06:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-20T19:22:39.000Z (almost 2 years ago)
- Last Synced: 2025-03-16T08:04:34.969Z (about 1 year ago)
- Language: Elm
- Size: 479 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Elm Radix UI
A port of [Radix UI](https://www.radix-ui.com/) to Elm to make for quick prototyping and easily extending your prototype into a long term project.
## Supported Components
### Layout
- [x] Box
- [x] Flex
- [x] Grid
- [x] Container
- [x] Section
### Typography
- [x] Text
- [x] Heading
- [x] Blockquote
- [x] Code
- [x] Em
- [x] Kbd
- [x] Link
- [x] Quote
- [x] Strong
### Components
- [x] Alert Dialog
- [x] Aspect Ratio
- [x] Avatar
- [x] Badge
- [x] Button
- [x] Callout
- [x] Card
- [x] Checkbox
- [ ] Checkbox Group
- [ ] Checkbox Cards
- [ ] Context Menu
- [x] Data List
- [x] Dialog
- [ ] Dropdown Menu
- [ ] Hover Card
- [x] Icon Button
- [x] Inset
- [ ] Popover
- [x] Progress
- [ ] Radio
- [ ] Radio Group
- [ ] Radio Cards
- [ ] Scroll Area
- [ ] Segmented Control
- [x] Select
- [x] Separator
- [x] Skeleton
- [x] Slider
- [x] Spinner
- [x] Switch
- [x] Table
- [x] Tabs
- [ ] Tab Nav
- [ ] Toast
- [ ] Toggle Group
- [x] Text Area
- [x] Text Field
- [x] Tooltip
--- Useful info but needs organizing
https://github.com/radix-ui/themes/tree/main/packages/radix-ui-themes
---
## Contributing
- [elm-watch](https://lydell.github.io/elm-watch/what-elm-watch-is/) for live reloading and dev server
- [@ryannhg/css-in-elm](https://www.npmjs.com/package/@ryannhg/css-in-elm) for CSS code generation
- [elm-format](https://github.com/avh4/elm-format) for code formatting
- [elm-review](https://www.npmjs.com/package/elm-review) for code review and cleanup
- [run-pty](https://www.npmjs.com/package/run-pty) for running the dev environment in a clean and easy to read manner
### Getting Started
Clone this repo, then run
```sh
npm install
npm run dev
```