App UI Kit
Components
Accordion(opens in a new tab or window)Alert(opens in a new tab or window)Avatar(opens in a new tab or window)AvatarGroup(opens in a new tab or window)AudioCard(opens in a new tab or window)Badge(opens in a new tab or window)Box(opens in a new tab or window)Button(opens in a new tab or window)Carousel(opens in a new tab or window)Checkbox(opens in a new tab or window)CheckboxGroup(opens in a new tab or window)ColorSelector(opens in a new tab or window)Column(opens in a new tab or window)Columns(opens in a new tab or window)DateInput(opens in a new tab or window)EmbedCard(opens in a new tab or window)FileInput(opens in a new tab or window)FileInputItem(opens in a new tab or window)Flyout(opens in a new tab or window)FlyoutMenu(opens in a new tab or window)FormField(opens in a new tab or window)Grid(opens in a new tab or window)HorizontalCard(opens in a new tab or window)Icons(opens in a new tab or window)ImageCard(opens in a new tab or window)InputPill(opens in a new tab or window)Link(opens in a new tab or window)LoadingIndicator(opens in a new tab or window)Masonry(opens in a new tab or window)MultilineInput(opens in a new tab or window)NumberInput(opens in a new tab or window)Pill(opens in a new tab or window)PillsInput(opens in a new tab or window)Placeholder(opens in a new tab or window)ProgressBar(opens in a new tab or window)RadioGroup(opens in a new tab or window)Rows(opens in a new tab or window)Scrollable(opens in a new tab or window)SearchInputMenu(opens in a new tab or window)SegmentedControl(opens in a new tab or window)Select(opens in a new tab or window)Slider(opens in a new tab or window)Swatch(opens in a new tab or window)Switch(opens in a new tab or window)Tabs(opens in a new tab or window)Text(opens in a new tab or window)TextInput(opens in a new tab or window)TextPlaceholder(opens in a new tab or window)Title(opens in a new tab or window)TitlePlaceholder(opens in a new tab or window)TypographyCard(opens in a new tab or window)VideoCard(opens in a new tab or window)
The App UI Kit exposes design tokens for shadows. These shadows add subtle elevation to a component, which is mostly noticeable with the light theme, as they blend in with the app's background on a dark theme.
List of shadow tokens
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-box-shadow-faint | boxShadowFaint | ||
--ui-kit-box-shadow-medium | boxShadowMedium | ||
--ui-kit-box-shadow-heavy | boxShadowHeavy |