Drivn vs shadcn/ui — Textarea Compared

Drivn puts every Textarea class in a single const styles object with one base key, built through cn(). You read the whole visual surface top to bottom — sizing, border, text colour, focus, resize, disabled — in five lines, then merge any caller className over it. shadcn/ui keeps the same classes but inlines them directly in the cn() call inside the JSX, alongside a data-slot="textarea" attribute used for styling hooks.

Neither approach adds a dependency, so the choice is about how you prefer to read and edit a component. Drivn's object means restyling is editing one named key; shadcn's inline string means the classes sit right where they are applied. Both end up as the same <textarea> element. See the full surface on the Textarea reference.

Drivn's Textarea is wrapped in React.forwardRef<HTMLTextAreaElement, TextareaProps>, so the ref lands directly on the underlying <textarea>. That is what lets react-hook-form register the field, what gives you imperative focus, and what keeps the component working on React 18 as well as 19. shadcn/ui's current Textarea drops forwardRef entirely and is a plain function that spreads props — it relies on React 19 treating ref as a normal prop.

Functionally the result is the same on React 19: both forward the ref to the textarea, so both work with form libraries and focus management. The difference is compatibility surface — Drivn's explicit forwardRef is the conservative choice that behaves identically across React versions, while shadcn's leaner signature assumes React 19. The props type is just React.TextareaHTMLAttributes<HTMLTextAreaElement>, so every native attribute — rows, maxLength, name, onChange — passes straight through.

Being honest about the defaults: shadcn/ui's Textarea ships three things Drivn leaves to you. It adds a focus-visible ring so keyboard focus is clearly visible, aria-invalid styling that paints a destructive ring when a field is marked invalid, and field-sizing-content so the box auto-grows with the typed content. Drivn's Textarea uses focus:outline-none transition-colors with no ring, relies on the border for focus indication, and uses a fixed min-h-[80px] with resize-y for a user-dragged handle instead of auto-grow.

If you want shadcn's behaviour on the Drivn component, it is a few utility classes away — add focus-visible:ring-2 focus-visible:ring-ring to the styles.base object and an aria-invalid:border-destructive for validation. Because the classes live in one place, you are editing one key rather than hunting through a long inline string. The trade is the usual Drivn trade: a smaller default surface you extend deliberately, versus richer defaults you inherit — the same trade you see across Drivn vs shadcn comparisons.