Перейти к содержимому

shadcn.io: лучшее место, чтобы находить новые blocks для shadcn/ui

Компоненты помогают начать, но именно blocks позволяют быстро выпускать целые страницы. Рассказываем, почему shadcn.io стал нашим любимым местом, чтобы находить новые, готовые к продакшену blocks для shadcn/ui.

Если вы строите на shadcn/ui, вы уже знаете магию: код принадлежит вам. Нет никакой зависимости-чёрного-ящика, с которой пришлось бы бороться — вы копируете компонент, и он ваш, лепите из него что хотите.

Но компоненты — это мелкие детали. Кнопка, поле ввода, карточка. Настоящий пожиратель времени — собирать эти детали в blocks: секцию с ценами, каркас дашборда, экран аутентификации, сетку возможностей. Именно здесь и происходит большая часть работы (и большая часть копирования-из-старых-проектов).

Именно этот пробел заполняет shadcn.io, и поэтому он стал нашим выбором по умолчанию.

Что такое shadcn.io?

shadcn.io — это большой, активно растущий реестр blocks, построенных поверх shadcn/ui: целые, уже собранные секции, которые можно бросить на страницу и выпустить. Не примитивы, а те макеты, на ручную сборку которых иначе ушёл бы целый вечер.

Каждый block следует той же философии, что и сам shadcn/ui: это обычный код, который принадлежит вам, оформленный на Tailwind, без привязки в рантайме. Вы устанавливаете его, и он становится частью вашей кодовой базы.

Почему это лучшее место, чтобы находить новые blocks

Его выделяет несколько вещей:

  • Широта. Маркетинговые секции, дашборды, таблицы, потоки аутентификации, цены, отзывы — каталог покрывает страницы, которые реально нужны настоящим продуктам, а не горсть демо.
  • Свежесть. Новые blocks появляются регулярно, так что вы строите на актуальных паттернах, а не на чём-то, к чему последний раз прикасались год назад.
  • Копировать и вставить, а не устанавливать и молиться. Поскольку blocks собраны из примитивов shadcn/ui, они читаются как код, который вы написали бы сами — легко настраивать, легко тематизировать.
  • Отлично уживается с реестром. Blocks встраиваются в тот же рабочий процесс shadcn, которым вы уже пользуетесь, так что учить ничего нового не нужно.

Как мы это используем

Наш процесс прост: начинаем страницу с block из shadcn.io, который готов на 80 %, а затем подгоняем оставшиеся 20 % под бренд. Поскольку код принадлежит вам, эти последние 20 % — пустяк: поменять токены, поправить отступы, готово. Так «спроектировать страницу с ценами» превращается из дня в час.

Neobrutalism ♥ shadcn.io

Мы гордимся партнёрством с shadcn.io. Если вам нравится необруталистское прочтение shadcn/ui от Neobrutalism, в их библиотеке blocks вы почувствуете себя как дома — та же модель владения кодом, та же основа на Tailwind, куда больше охваченной территории.

Загляните в коллекцию на shadcn.io и убедитесь, как быстро складывается страница, когда blocks уже готовы.


← Назад к статьям