Textarea

Multi-line text input with hard-edge styling. Like a note card waiting to be filled, the textarea features sharp borders and solid shadows that respond to user interaction.

Basic Textarea

With Label

Your Bio

Max 500 characters

Different Heights

Small (3 rows)

Medium (5 rows)

Large (8 rows)

Disabled State

Disabled Textarea

With Default Value

Project Description

Contact Form Example

Send us a Message

Name

Message

With Character Limit

Share your thoughts0 / 280

With Custom ScrollArea

Using ScrollArea for a more polished scrolling experience with custom styled scrollbar

Notes

Hard-Edge Stack is a neo-brutalist design system that embraces bold, tangible aesthetics.

It features sharp borders, solid shadows, and high contrast colors that create a tactile digital experience.

Key design principles:
• Zero blur shadows - all shadows are crisp and offset
• High contrast - using oatmeal white backgrounds with carbon black borders
• Signal purple accents for key interactive elements
• Space Grotesk for headlines, DM Sans for body text

This textarea demonstrates the integration with ScrollArea, providing a more polished scrolling experience with a custom styled scrollbar that matches the overall design language.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom scrollbar matches the design system

Read-only with ScrollArea

Ideal for displaying long-form content with styled scrolling

1. Acceptance of Terms
By accessing and using Hard-Edge Stack, you accept and agree to be bound by these terms.

2. Use License
Permission is granted to use the components for personal and commercial projects.

3. Disclaimer
The components are provided "as is" without warranty of any kind.

4. Limitations
In no event shall the authors be liable for any damages arising from use.

5. Revisions
We may revise these terms at any time without notice.

6. Contact
Questions about terms should be sent to [email protected].