Skip to component cases

Internal quality harness

Component QA

33 components

Actions

Button

5 states · native keyboard

Actions

Icon Button

4 states · native keyboard

Feedback

Tooltip

4 states · scripted keyboard

Edit project

Content

4 states · native keyboard

A default link, a quiet one and an accent one.

Forms

Field

3 states · native keyboard

Forms

Textarea

3 states · native keyboard

Forms

Select

3 states · native keyboard

Forms

Cascader

4 states · scripted keyboard

Americas / Chile

Forms

Tree Select

6 states · scripted keyboard

Documentation sections

Forms

Choice

3 states · native keyboard

What gets validated

Forms

Switch

2 states · native keyboard

Forms

States

4 states · native keyboard

Data

Card

1 states · not-applicable keyboard

Personal project

A surface grouped only when the content needs a boundary you can recognise.

Data

Badge

4 states · not-applicable keyboard

v0.7.0 Stable API change

Data

Table

2 states · not-applicable keyboard

ControlCompactTouch
Button32px44px
Field32px44px
Choice20px44px

Content

Prose + Code

1 states · not-applicable keyboard

Greda grows from evidence, not speculation. A pattern enters the system only after it repeats across real projects.

That keeps the stylesheet small enough to understand and makes each public class carry a clear responsibility.

Before a pattern enters

  • Complete interactive states, :focus-visible included.
  • Mobile behaviour from 360px up.
  • Tokens instead of repeated values.

The component should explain its purpose before its decoration.

Greda contribution principle
HTML 
<link rel="stylesheet" href="/v0.7.0/greda.css">
            
            <button class="gr-button gr-button--primary">Save</button>

Overlays

Dialog

2 states · scripted keyboard

Discard the changes

Everything edited since the last save will be lost. This cannot be undone.

Overlays

Drawer

2 states · native keyboard

Filter projects

Status

Overlays

Search / Command Menu

5 states · scripted keyboard

Search commands

Go to foundations Navigate Browse components Navigate Read release notes Navigate Use Greda with AI Navigate

4 commands available.

Content

Disclosure

2 states · native keyboard

Why is there no build step?

Because a person should be able to copy the styles/ folder and keep working without installing anything.

When does a component get in?

Once it has shown up as a real pattern in more than one project.

Navigation

Tabs

2 states · scripted keyboard

32px with a precise pointer, from 45rem up.

Navigation

Vertical Steps

3 states · native keyboard

  1. Draft Content and component API complete. Completed
  2. Review Accessibility and responsive behavior. Current step
  3. Publish Create the immutable release. Not started

Overlays

Popover

2 states · native keyboard

Local references, duplicate ids, inline styles, colours outside the tokens, and transitions on properties that are not composited.

Actions

Dropdown Menu

5 states · scripted keyboard

Feedback

Callout

2 states · not-applicable keyboard

Breakpoints are a fixed scale

A media query cannot read a token, so sm, md and lg are written out.

The accent does not separate focus from error

Today danger resolves to the accent; separating them is one line in tokens.css.

Feedback

Toast

1 states · not-applicable keyboard

Tokens validated: 2 documents, 7 stylesheets.

In real use it sits inside .gr-toast-region, which pins it to the bottom and intercepts no clicks.

Feedback

Spinner and Progress

2 states · not-applicable keyboard

Validating tokens…

The spinner never travels alone: prefers-reduced-motion freezes it, and a still circle says nothing. The label does.

Feedback

Skeleton

1 states · not-applicable keyboard

Feedback

Empty state

1 states · not-applicable keyboard

No component matches

Try another name, or look at the full list of primitives.

View all

Navigation

Breadcrumb

1 states · native keyboard

Navigation

Pagination

2 states · native keyboard

Navigation

Header, Nav and Footer

2 states · not-applicable keyboard

The top bar is .gr-header with .gr-nav, and it uses the sticky layer instead of an invented z-index. The footer is .gr-footer.

Navigation

2 states · native keyboard

Skip to content

It lives at the start of the <body>. Press Tab on load to watch it appear.