Перейти до вмісту

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 уже готові.


← Назад до статей