@raandino/atelier-react

Truora design-system React components — Host Grotesk, the Glass Effect, and the 40/30/15/10/5 color hierarchy, straight from the brand manual. 13 runtime exports, hand-authored TypeScript types.

The components are inline-style + CSS-variable based (no Radix, no Tailwind, no cva). They read their colors, fonts, radii, and the Glass Effect from CSS custom properties — so you must also load the token stylesheet from @raandino/atelier-tokens, or everything renders unstyled.

Install

npm install @raandino/atelier-react @raandino/atelier-tokens

react and react-dom (>=18) are peer dependencies.

Usage

Load the tokens CSS once at your app root, then use the components:

import '@raandino/atelier-tokens/tokens.css'; // required — defines the CSS vars
import { Button, GlassCard, BrandShape } from '@raandino/atelier-react';

export function App() {
  return (
    <GlassCard>
      <BrandShape shape="leaf" />
      <Button variant="primary">Empieza gratis</Button>
    </GlassCard>
  );
}

Exports

Runtime (13): TRUORA_PATHS, BrandShape, ProductIcon, Avatar, Badge, Button, Card, GlassCard, IconButton, Checkbox, Input, Switch, Tabs.

Types: AvatarProps, BadgeProps, BrandShapeProps, ButtonProps, CardProps, CheckboxProps, GlassCardProps, IconButtonProps, InputProps, ProductIconProps, SwitchProps, TabsProps, and the TabItem interface.

Tabs is the runtime component; TabItem is a type only (the shape of each item you pass to Tabs).

Build

pnpm --filter @raandino/atelier-react build

This bundles the components with tsup (ESM dist/index.js + CJS dist/index.cjs, React kept external) and then runs copy-types.mjs, which copies the design-system's sidecar .d.ts files into dist/components/** and generates dist/index.d.ts. The component source stays in design-system/ — this package only re-exports and packages it.