Создатели UI библиотеки
Отличительные особенности - headless, a11y
Основана на другой их UI библиотеке - zag.js, которая работает на технике конечных автоматов состояния
Разрабатывает команда из Нигерии
#ui #lib #headless #arkui
chakra-ui
для React
создали еще одну приятно смотрящуюся библиотеку для различных фреймворков, в том числе и Vue
- ArkОтличительные особенности - headless, a11y
Основана на другой их UI библиотеке - zag.js, которая работает на технике конечных автоматов состояния
Разрабатывает команда из Нигерии
#ui #lib #headless #arkui
Ark-Ui
Home | Ark UI
A headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.
Мы уже писали об Ark UI библиотеке
На днях видный член
Выглядит очень хорошей альтернативой
Попробовал на своем проекте. Сперва заменил FilePond на
Ну и правильный
#ui #lib #headless #arkui
На днях видный член
vuejs core team
и VitePress
maintainer Divyansh Singh
назвал их лучшей альтернативой React Aria во Vue
экосистемеUnstyled
, хорошая поддержка A11y
. Vue
версия еще неполная. Документация скудная, не для вкатунов. Нужно думать. Основана библиотека на zag.js, документацию можно смотреть там.Выглядит очень хорошей альтернативой
radix/reka/shadcn|vue
, только без встроенных tailwind
-ов, vueuse
-ов, unjs
-ов, tanstack
-ов и других скрытых зависимостей и обмана типа "copy-paste и всё".Попробовал на своем проекте. Сперва заменил FilePond на
FileUpload
- (-100Kb; +30Kb). Стало значительно красивей и намного кастомизируемей (стили генерил AI
). Затем добавил Tabs
(+20Кб). Затем - Combobox
с тэгами и выпадающим меню, которое во многих UI
библиотеках тащит 200-400Кб из-за позиционирования - (+70Кб). В общем, вполне экономично и удобно для создания своего небольшого UI kit
с требованиями к A11y
.Ну и правильный
DatePicker
можно собрать.#ui #lib #headless #arkui
Технические детали проекта выше
Для графика (
Используются разные
Кнопка справа внизу (
Её задача - сделать удобный
#lissa #pet #arkui
ark-ui
в некоторых местах глючит, но как UI
библиотека понравилась, буду использовать.Для графика (
chart
) модели из TS
переделал на классы (без реактивности внутри), стало намного удобнейAI
очень помогает делать перевод сайта сразу на нескольких языках одновременно с кодингомИспользуются разные
LLM
для парсинга файлов и аналитических отчетов (подешевле и подороже)Кнопка справа внизу (
FAB
) идет как волшебная палочка - в ней разные действия в зависимости от страницы и контекста.Её задача - сделать удобный
UX
, чтобы пользователь не бегал по всему экрану пальцемPWA
, variable fonts
, JSON-RPC
, JSON5
#lissa #pet #arkui
Хорошая библиотека
Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить
Немного радует, что довольно часто обновляется и фиксят баги.
P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.
#lib #arkui
Ark-ui
, но с особенностями. Особенно у "выпадашки" HoverCard
(для меню которая)Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить
:key
на HoverCard
и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...Немного радует, что довольно часто обновляется и фиксят баги.
P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.
#lib #arkui
Получил очень интересный и полезный опыт:
1. Выделив
2. Добавив дизайн систему на
3. Выделив в отдельный репозиторий, который ставится как
4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах
На
Alt-UI
#arkui #altui #ui
1. Выделив
UI
часть проекта Lissa Health
в отдельный модуль (привет, #fsd)2. Добавив дизайн систему на
CSS свойствах
и оформив всё как UI kit
3. Выделив в отдельный репозиторий, который ставится как
Git submodule
и подключается через npm
локально (для быстрых правок)4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах
На
npmjs.org
не публиковал, на универсальность, полноту (не собираюсь выпускать ее как общую библиотеку) и актуальность документации не претендую, но можно просто посмотреть как работать с Ark-UI
.Alt-UI
#arkui #altui #ui
GitHub
GitHub - vuesence/alt-ui: Alt-UI Vue library (based on Ark-UI)
Alt-UI Vue library (based on Ark-UI). Contribute to vuesence/alt-ui development by creating an account on GitHub.