Getting Started
Thoughtfully designed React UI blocks. Low-dependency, copy-paste, yours to edit.
fern is a set of React blocks where the differentiation is behaviour and
usability, not colour. Colour systems are a solved problem — the theme
foundation is borrowed from @heroui/styles.
What is not solved, and what fern exists to do well, is the hundred small
interaction details most component libraries get wrong.
Install
bun add @fern-ui/color-pickerPrinciples
Low dependency. Blocks depend on React and nothing else at runtime. Colour maths, drag handling, and keyboard behaviour are written rather than installed.
Accessible by default. Full keyboard support, correct ARIA, 40px hit areas,
live-region announcements, and prefers-reduced-motion support — not an
afterthought toggle.
Yours to edit. Blocks are meant to be copied into your codebase and changed. The npm package is a convenience, not a lock-in.