Components

FastHTML wrappers for Zendesk Garden CSS components

p = mk_previewer()

Anchors

The c-anchor component styles links with Garden’s typography and color system.

Basic Usage

p(Anchor('Click here', href='#'))

Danger

p(Anchor('Delete this', href='#', cls='--danger'))

Dark

For use on dark backgrounds.

p(Div(Anchor('Dark link', href='#', cls='--dark'), style='background:#333; padding:1rem'))

Avatars

Styled avatar images with Garden’s sizing and shape system.

Basic Usage

An Avatar can contain an image or text

p(Avatar(Img(src='https://ui-avatars.com/api/?name=John+Doe')))

p(Div(
    Avatar(Img(src='https://picsum.photos/200')),
    Avatar(AvatarTxt('ZD'), style='background:var(--zd-color-secondary-royal-700)'),
    style='display:flex; gap:1rem; align-items:center'
))

print(Avatar(Span('ZD', cls='c-avatar__txt', style='background:--zd-color-secondary-royal-700'), cls='--system'))

<figure class="c-avatar c-avatar--system "><span class="c-avatar__txt" style="background:--zd-color-secondary-royal-700">ZD</span></figure>

Sizes

Avatars come in extra-small, small, default, and large sizes.

p(Div(
    Avatar(Img(src='https://ui-avatars.com/api/?name=XS'), cls='--xs'),
    Avatar(Img(src='https://ui-avatars.com/api/?name=SM'), cls='--sm'),
    Avatar(Img(src='https://ui-avatars.com/api/?name=MD')),
    Avatar(Img(src='https://ui-avatars.com/api/?name=LG'), cls='--lg')
))

System

Square avatars for system/product icons.

p(Avatar(Img(src='https://ui-avatars.com/api/?name=SYS'), cls='--system'))

Dark

For use on dark backgrounds.

p(Div(Avatar(Img(src='https://ui-avatars.com/api/?name=DK'), cls='--dark'), style='background:#333; padding:1rem'))

Buttons

Styled buttons with Garden’s button system.

Basic Usage

p(Div(
    Btn('Standard'),
    Btn('Basic', cls='--basic'),
    Btn('Pill', cls='--pill'),
    style='display:flex; gap:1rem; align-items:center'
))

Primary

p(Btn('Primary', cls='--primary'))

Danger

p(Btn('Delete', cls='--danger'))

Full Width

p(Btn('Full Width', cls='--full'))

Sizes

p(Div(Btn('Small', cls='--sm'), Btn('Default'), Btn('Large', cls='--lg'), style='display:flex; gap:1rem; align-items:center'))

Dark

For use on dark backgrounds.

p(Div(Btn('Dark', cls='--dark'), style='background:#333; padding:1rem'))

Combinations

p(Div(Btn('Primary Pill', cls='--primary --pill'), Btn('Danger Large', cls='--danger --lg'), style='display:flex; gap:1rem'))

Forms

Garden forms combine inputs with labels, hints, and validation messages inside a c-field container.

Basic Usage

Text Input

p(Field(
    FieldLabel('Name', fr='name-id'),
    FieldHint('Enter your full name'),
    FieldInput(id='name-id', placeholder='John Doe')
))

Textarea

p(Field(
    FieldLabel('Bio', fr='bio-id'),
    Textarea(id='bio-id', placeholder='Tell us about yourself')
))

Select

p(Field(
    FieldLabel('Country', fr='country-id'),
    Select(Option('USA'), Option('UK'), Option('Canada'), id='country-id')
))

Checkbox

p(Field(
    Checkbox(id='agree-id'),
    FieldLabel('I agree to the terms', fr='agree-id'),
    FieldHint('Please read carefully')
))

Radio

p(Div(
    Field(Radio(id='opt1', name='options'), FieldLabel('Option 1', fr='opt1')),
    Field(Radio(id='opt2', name='options'), FieldLabel('Option 2', fr='opt2')),
    Field(Radio(id='opt3', name='options'), FieldLabel('Option 3', fr='opt3'))
))

Validation States

p(Field(
    FieldLabel('Email'), FieldInput(),
    FieldMessage('Valid email', cls='--success'),
    cls='--success'
))

p(Field(
    FieldLabel('Password'), FieldInput(type='password'),
    FieldMessage('Password too weak', cls='--warning'),
    cls='--warning'
))

p(Field(
    FieldLabel('Username'), FieldInput(),
    FieldMessage('Username is required', cls='--error'),
    cls='--error'
))

Compact and Dark

p(Field(FieldLabel('Compact'), FieldInput(), cls='--compact'))

p(Div(
    Field(FieldLabel('Dark mode'), FieldInput(), cls='--dark'),
    style='background:#333; padding:1rem'
))

Tags

Styled tags for badges, pills, and labels using Garden’s tag system.

Basic Usage

Shapes

Tags come in default (rounded rectangle), pill, and round shapes.

p(Div(
    Tag('Default'),
    Tag('Pill', cls='--pill'),
    Tag('R', cls='--round'),
    style='display:flex; gap:1rem'
))

Sizes

p(Div(
    Tag('Small', cls='--sm'),
    Tag('Default'),
    Tag('Large', cls='--lg'),
    style='display:flex; gap:1rem; align-items:center'
))

Colors

p(Div(
    Tag('Blue', cls='--blue'),
    Tag('Green', cls='--green'),
    Tag('Grey', cls='--grey'),
    Tag('Kale', cls='--kale'),
    Tag('Red', cls='--red'),
    Tag('Yellow', cls='--yellow'),
    style='display:flex; gap:0.5rem; flex-wrap:wrap'
))

Dark

For use on dark backgrounds.

p(Div(Tag('Dark', cls='--dark'), style='background:#333; padding:1rem'))

With Avatar

Tags can include an avatar image.

p(Tag(TagAvatar(src='https://ui-avatars.com/api/?name=JD&size=32'), 'With Avatar'))