Components — Atelier · Truora Design System

Core

6 components

Avatar

Circular user avatar with photo or initials fallback and optional presence dot.

MLCRATT

componentsnpm · @raandino/atelier-react

import { Avatar } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Avatar tokens: --success --danger --warning --neutral-400 --brand-subtle --brand-active */

skillprompt · atelier

Using the atelier skill, add Avatar — Circular user avatar with photo or initials fallback and optional presence dot.

Props 5

Prop	Type	Required
`name`	`string`	—
`src`	`string \| null`	—
`size`	`xssmmdlgxl`	—
`status`	`onlinebusyawayoffline`	—
`style`	`React.CSSProperties`	—

Badge

Pill-shaped status / category label; use for verification states, tags, and channel context.

NewVerifiedPendingRejectedInfoWhatsApp

componentsnpm · @raandino/atelier-react

import { Badge } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Badge tokens: --brand-subtle --brand-active --brand --surface-sunken --text-body --neutral-400 */

skillprompt · atelier

Using the atelier skill, add Badge — Pill-shaped status / category label.

Props 5

Prop	Type	Required
`children`	`React.ReactNode`	—
`tone`	`brandneutralsuccesswarningdangerinfowhatsapp`	—
`dot`	`boolean`	—
`solid`	`boolean`	—
`style`	`React.CSSProperties`	—

Button

Truora pill action button — sentence-case, verb-first labels; primary is Naranja (the brand's CTA color), violet for key brand elements, glass over photos/dark panels.

componentsnpm · @raandino/atelier-react

import { Button } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Button tokens: --cta --on-cta --brand --on-brand --midnight --on-midnight */

skillprompt · atelier

Using the atelier skill, add Button — Truora pill action button.

Props 10

Prop	Type	Required
`children`	`React.ReactNode`	—
`variant`	`primaryvioletmidnightsecondaryghostsubtleglasswhatsappinverse`	—
`size`	`smmdlg`	—
`leftIcon`	`React.ReactNode`	—
`rightIcon`	`React.ReactNode`	—
`fullWidth`	`boolean`	—
`disabled`	`boolean`	—
`type`	`buttonsubmitreset`	—
`onClick`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	—
`style`	`React.CSSProperties`	—

Card

White surface container for grouped content — soft shadow, rounded, hairline border.

Card

Flat surface, subtle elevation.

Interactive

Lifts on hover.

componentsnpm · @raandino/atelier-react

import { Card } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Card tokens: --surface-card --border-subtle --radius-lg --shadow-lg --shadow-md --dur-base */

skillprompt · atelier

Using the atelier skill, add Card — White surface container for grouped content.

Props 5

Prop	Type	Required
`children`	`React.ReactNode`	—
`padding`	`smmdlg`	—
`interactive`	`boolean`	—
`elevated`	`boolean`	—
`style`	`React.CSSProperties`	—

GlassCard

Truora's signature Glass Effect surface — use it for depth instead of gradients (which are forbidden). The signature look: tuck a violet brand shape partly BEHIND the pane so it blooms through the blur.

Glass Effect

Rectangular pane, soft blur — depth without gradients.

componentsnpm · @raandino/atelier-react

import { GlassCard } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* GlassCard tokens: --glass-radius-sm --glass-radius --glass-radius-lg --glass-fill --glass-border --glass-highlight */

skillprompt · atelier

Using the atelier skill, add GlassCard — Truora's signature Glass Effect surface.

Props 5

Prop	Type	Required
`children`	`React.ReactNode`	—
`on`	`darkphotolight`	—
`padding`	`smmdlg`	—
`radius`	`'sm' \| 'md' \| 'lg' \| number`	—
`style`	`React.CSSProperties`	—

IconButton

Square icon-only button for toolbars and dense controls.

componentsnpm · @raandino/atelier-react

import { IconButton } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* IconButton tokens: --brand --on-brand --brand-hover --surface-card --brand-subtle --text-body */

skillprompt · atelier

Using the atelier skill, add IconButton — Square icon-only button for toolbars and dense controls.

Props 7

Prop	Type	Required
`children`	`React.ReactNode`	—
`label`	`string`	yes
`variant`	`primarysecondaryghostsubtle`	—
`size`	`smmdlg`	—
`disabled`	`boolean`	—
`onClick`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	—
`style`	`React.CSSProperties`	—

Forms

3 components

Checkbox

Checkbox with optional inline label; violet fill + white check when on.

I accept the terms

componentsnpm · @raandino/atelier-react

import { Checkbox } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Checkbox tokens: --weight-medium --font-sans --text-body --radius-xs --brand --surface-card */

skillprompt · atelier

Using the atelier skill, add Checkbox — Checkbox with optional inline label.

Props 6

Prop	Type	Required
`checked`	`boolean`	—
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—
`label`	`React.ReactNode`	—
`disabled`	`boolean`	—
`id`	`string`	—
`style`	`React.CSSProperties`	—

Input

Labeled text field with helper/error text and optional adornments.

We'll send your access here

Phone

+57

Invalid number

componentsnpm · @raandino/atelier-react

import { Input } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Input tokens: --danger --brand --border-default --weight-medium --font-sans --text-strong */

skillprompt · atelier

Using the atelier skill, add Input — Labeled text field with helper/error text and optional adornments.

Props 12

Prop	Type	Required
`label`	`string`	—
`hint`	`string`	—
`error`	`string`	—
`leftAdornment`	`React.ReactNode`	—
`rightAdornment`	`React.ReactNode`	—
`id`	`string`	—
`value`	`string`	—
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—
`placeholder`	`string`	—
`type`	`string`	—
`disabled`	`boolean`	—
`style`	`React.CSSProperties`	—

Switch

On/off toggle for instant-apply settings; violet track + spring knob.

WhatsApp notifications

componentsnpm · @raandino/atelier-react

import { Switch } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Switch tokens: --weight-medium --font-sans --text-body --radius-pill --brand --neutral-300 */

skillprompt · atelier

Using the atelier skill, add Switch — On/off toggle for instant-apply settings.

Props 7

Prop	Type	Required
`checked`	`boolean`	—
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—
`label`	`React.ReactNode`	—
`size`	`smmd`	—
`disabled`	`boolean`	—
`id`	`string`	—
`style`	`React.CSSProperties`	—

Navigation

1 component

Tabs

Underline tab bar for switching views within a screen.

componentsnpm · @raandino/atelier-react

import { Tabs } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* Tabs tokens: --border-subtle --weight-semibold --font-sans --brand --text-strong --text-muted */

skillprompt · atelier

Using the atelier skill, add Tabs — Underline tab bar for switching views within a screen.

Props 4

Prop	Type	Required
`items`	`TabItem[]`	yes
`value`	`string`	yes
`onChange`	`(value: string) => void`	—
`style`	`React.CSSProperties`	—

Brand

2 components

BrandShape

Brand graphic shapes ("ADN en formas") — isotype curves used as compositional elements; frame photos, build rhythm, decorate panels.

componentsnpm · @raandino/atelier-react

import { BrandShape } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* BrandShape tokens: --brand --neutral-25 */

skillprompt · atelier

Using the atelier skill, add BrandShape — Brand graphic shapes ("ADN en formas").

Props 5

Prop	Type	Required
`shape`	`finleafbodycheckflowercrescentseedcircleojo`	—
`color`	`string`	—
`accent`	`string`	—
`size`	`number`	—
`style`	`React.CSSProperties`	—

ProductIcon

Truora product icons built from the logo's curves — identity validation, background checks, customer engagement, e-signature.

componentsnpm · @raandino/atelier-react

import { ProductIcon } from '@raandino/atelier-react';

stylesCSS · @raandino/atelier-tokens

@import '@raandino/atelier-tokens/tokens.css'; /* ProductIcon tokens: --brand */

skillprompt · atelier

Using the atelier skill, add ProductIcon — Truora product icons built from the logo's curves.

Props 7

Prop	Type	Required
`name`	`identidadverificacionengagementfirma`	—
`size`	`number`	—
`color`	`string`	—
`accent`	`string`	—
`badge`	`boolean`	—
`badgeColor`	`string`	—
`style`	`React.CSSProperties`	—

The component catalog

Core

Forms

Navigation

Brand