[Перевод] Анатомия shadcn/ui

Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui . Вместо того, чтобы распространяться в виде пакета npm , компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui . "Почему код для копирования/вставки, а не библиотека? Идея заключается в том, что вы полностью владеете и контролируете код. Это позволяет вам решать, как именно будут построены и оформлены ваши компоненты. Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды. Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации". На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода. Цель этой статьи — немного изучить архитектуру и реализацию shadcn/ui . Если вы еще не использовали shadcn/ui , я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

https://habr.com/ru/companies/timeweb/articles/781346/

#timeweb_статьи_перевод #shadcn/ui #tailwindcss #react_table #react_hook_form #radix_ui #reactjs #reactjs #react #js #css #design_system #дизайнсистема