Product Radar
Продукт находится в «Базе проектов Радара» и не участвует в публичном рейтинге.
pbstyles и pbcomponents
Открытая дизайн-система от Figma до React: стили, компоненты и тёмная тема
Обсуждение (1)
О продукте
Для кого:
Разработчики и небольшие команды без отдельного дизайнера, которым нужно быстро собрать прототип, MVP или пет-проект на React и Tailwind 4.
Проблема:
Каждый проект начинается с кнопок, полей и модальных окон, которые надо заново нарисовать, сверстать и проверить. Со временем макет и код расходятся в цветах и отступах.
Решение:
Цвета, размеры и шрифты хранятся в JSON-токенах, из них генерируются стили для Tailwind 4, CSS, LESS и SCSS. На этих стилях построены React-компоненты, такие же есть в Figma.
Преимущества:
Светлая и тёмная тема уже настроены. 32 компонента и 11 хуков на React 19 и TypeScript. Цвет primary/300 в Figma — это класс bg-primary-300 в коде. Бесплатно, MIT.
Посмотрите, как устроена система. Установка: npm i @prosazhin/pbcomponents @prosazhin/pbstyles
Перейти
Дополнительно:
Все четыре библиотеки делаю сам — от макетов в Figma до публикации в npm. На этой системе собран сайт prosazhin.dev. Не подойдёт, если нужна гибкость headless-библиотек вроде Radix.
Бесплатно
Основатель
Еще проекты из этой области
