@cdx-ui/components

Styled, theme-aware UI components for the Candescent Design System.

Built on top of @cdx-ui/primitives and @cdx-ui/styles, styled via Uniwind + CVA.

Installation

pnpm add @cdx-ui/components

Peer dependencies

• react >= 18.0.0
• react-native >= 0.74.0 (optional — for native targets)
• react-native-web >= 0.19.0 (optional — for web targets)
• uniwind >= 1.3.0 (optional — for styled usage)

Usage

import { Button } from '@cdx-ui/components';

export function Example() {
  return (
    <Button variant="strong" color="action" size="default" onPress={() => console.log('pressed')}>
      <Button.Label>Get Started</Button.Label>
    </Button>
  );
}

Component stories live in apps/storybook. See the full component reference for per-component docs.

Components

AlertDialog, Avatar, BottomSheet, Button, Card, Checkbox, Chip, Dialog, Field, Form, Heading, HStack / VStack, Icon, IconButton, Image, Input, Link, ListItem, OtpInput, ProgressBar, ProgressSegmented, Select, Switch, Text, VirtualizedList.

Box is exported but deprecated — use React Native's View directly.

Metro configuration helper

The package ships a withCdxMetroConfig helper that wraps your Metro config with CDX UI's styling-layer setup. This abstracts the underlying Uniwind configuration so consuming Metro configs stay stable if the styling layer changes.

const { withCdxMetroConfig } = require('@cdx-ui/components/metro');

module.exports = withCdxMetroConfig(config, {
  cssEntryFile: './global.css',
  generatedTypesFile: './uniwind-types.d.ts', // optional
});

withCdxMetroConfig must be the outermost wrapper if you compose multiple Metro config helpers.

React Native re-exports

For convenience, the package re-exports several core RN components and hooks with Uniwind className support:

| Export | Source | | --- | --- | | View | react-native | | ScrollView | react-native | | KeyboardAvoidingView | react-native | | SafeAreaView | react-native-safe-area-context | | useSafeAreaInsets | react-native-safe-area-context |

Figma Code Connect

Template files in src/figma/ map Figma component variants to production CDX UI snippets shown in Figma Dev Mode. These files are excluded from the npm tarball (!src/figma in files) and published to Figma via CI on pushes to main.

See the Code Connect authoring guide for conventions, property mapping patterns, and local workflow.

Testing

Tests live in __tests__/. Jest uses the repo-root jest.config.js with two projects: rntl (jest-expo native + @testing-library/react-native) for *.test.tsx, and axe (jest-expo web + jsdom + @testing-library/react + jest-axe) for *.axe.test.tsx.

# From monorepo root
pnpm nx run @cdx-ui/components:test
# or
pnpm test:all

Production types use tsconfig.json; tests use tsconfig.test.json.

Authoring: See docs/internal/testing.md (RNTL vs DOM, fireEvent.press vs fireEvent.click, file naming).

A11y-only ad-hoc (from packages/components):
pnpm exec jest --config ../../jest.config.js --testNamePattern="a11y"