Marigold
Getting StartedFoundationsComponentsPatternsReleases
Discover new Tutorials!

Components

Overview

Application

MarigoldProvider
RouterProvider

Layout

Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
Inset
Scrollable
Split
Stack
updated
Tiles

Actions

Button
updated
Link
updated
LinkButton
beta

Form

Autocomplete
Calendar
Checkbox
updated
ComboBox
DateField
DatePicker
Form
Multiselect
NumberField
Radio
SearchField
Select
Slider
Switch
TextArea
TextField
TimeField

Collection

SelectList
Table
Tag
updated

Navigation

Accordion
updated
Breadcrumbs
beta
Pagination
Tabs

Overlay

ContextualHelp
Dialog
updated
Drawer
beta
Menu
updated
Toast
beta
Tooltip

Content

Badge
Card
updated
Divider
Headline
Icon
List
updated
SectionMessage
SVG
Text
updated
VisuallyHidden
XLoader

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
parseFormData
useAsyncListData
useListData
useResponsiveValue
useTheme

cva

Helper to write styles for an element.

To write our styles for a component we use cva. This library comes with a great utility function which we use to write styles for our components. If you want to style your own component you can use this function which we updated with some additional style checks, for example it resolves conflicts in class names with tailwind-merge. With this the class names will be merged together.

Import

import { cva } from '@marigold/system';

Examples

Style an element

This example shows how to use the function inside a div element. You can add some variants and sizes if you want.

Preview
Code
this is some text
Last update: April 30, 2024
Build with 🥵, 🧡 and
v15.3.0