Buttons

Variants

Primary Secondary Outline Ghost Danger

Sizes

Small Medium Large

States

Normal Disabled Loading

Inputs

Basic Inputs

Textarea

Form Controls

Checkbox

Default checkbox Checked checkbox Disabled checkbox Checked & disabled

Radio

Option 1 Option 2 Option 3

Switch

Default switch Checked switch Disabled switch

Data Display

Avatar

Badge

Default Primary Success Warning Danger

Chip

Design Development Removable

Card

Card Title

This is the card content. You can put any content here including text, images, and other components.

Cancel Save

Feedback

Alert

This is an info alert This is a success alert This is a warning alert This is an error alert

Progress

Spinner

Navigation

Breadcrumb

Home Products Current Page

Tabs

Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3

Pagination

Layout

Container

This content is within a container component.

Stack

Item 1 Item 2 Item 3

Other

Accordion

hidearea-design is a modern design system built with Web Components. Run: npm install @hidearea-design/core @hidearea-design/tokens Yes! It works with React, Vue, Angular, or vanilla JavaScript.