@ledgerhq/ldls-ui-react
v0.0.51
Published
**React UI component library for Ledger Design System (LDLS)** - A comprehensive collection of accessible, customizable React components built with Tailwind CSS and Radix UI primitives.
Downloads
10,293
Readme
@ledgerhq/ldls-ui-react
React UI component library for Ledger Design System (LDLS) - A comprehensive collection of accessible, customizable React components built with Tailwind CSS and Radix UI primitives.
🎨 View Components in Storybook →
📦 Installation
Install the package and its required peer dependencies:
npm install @ledgerhq/ldls-ui-react @ledgerhq/ldls-design-core
# Install peer dependencies
npm install @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tooltip class-variance-authority clsx tailwind-merge
# React (if not already installed)
npm install react react-dom→ View @ledgerhq/ldls-design-core on npm
⚡ Quick Setup
1. Configure Tailwind CSS
Create or update your tailwind.config.js:
import type { Config } from 'tailwindcss';
import { ledgerLivePreset } from '@ledgerhq/ldls-design-core';
const config = {
content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@ledgerhq/ldls-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}'],
presets: [ledgerLivePreset],
} satisfies Config;
export default config;2. Start Using Components
import { Button } from '@ledgerhq/ldls-ui-react';
import { ArrowRight } from '@ledgerhq/ldls-ui-react/symbols';
function App() {
return (
<Button appearance='accent' icon={ArrowRight}>
Get Started
</Button>
);
}🎨 Theming & Customization
Using Design Tokens
All components use design tokens from @ledgerhq/ldls-design-core:
// Components automatically use theme tokens
<Button appearance='accent'>Themed Button</Button>;
const CustomCard = () => <div className='bg-base hover:bg-base-hover heading-0 p-12'>Custom themed content</div>;Dark Mode Support
LDLS components automatically support dark mode through CSS custom properties. The design system includes both light and dark theme tokens.
Enable Dark Mode
Add the dark class to your root element or use CSS media queries:
// Manual dark mode toggle
<html className='dark'>
<body>
<App />
</body>
</html>♿ Accessibility
All components are built with accessibility in mind:
- Keyboard Navigation - Full keyboard support for all interactive elements
- Screen Readers - Proper ARIA labels and descriptions
- Focus Management - Visible focus indicators and logical tab order
- Color Contrast - WCAG AA compliant color combinations
- Semantic HTML - Proper HTML elements and structure
🎨 Icon System
Import icons directly from the symbols export:
import { ArrowRight, CheckCircle, AlertTriangle } from '@ledgerhq/ldls-ui-react/symbols';
// Use icons as components with size prop
<ArrowRight size={24} />
<CheckCircle size={20} className="text-success" />
<AlertTriangle size={16} />
// Available sizes: 16, 20, 24, 40, 48, 56🤖 AI Assistant Setup
LDLS includes AI rules to help assistants (Cursor, Claude, VS Code Copilot, etc.) understand and suggest correct usage patterns.
Quick Setup
The AI rules are included in the package. Reference them from node_modules:
For Cursor users, add to your .cursorrules:
@node_modules/@ledgerhq/ldls-ui-react/ai-rules/RULES.mdFor other AI tools, see our AI Rules README for setup instructions.
What These Rules Do
The AI rules help assistants:
- ✅ Suggest correct import paths (
/symbolsfor icons) - ✅ Use LDLS design tokens instead of Tailwind defaults
- ✅ Configure Tailwind correctly with LDLS content paths
- ✅ Extract components from Figma with proper token mapping
- ✅ Recommend correct peer dependencies
🔷 TypeScript Support
Full TypeScript support with comprehensive type definitions:
import type { ButtonProps, BannerProps, InputProps } from '@ledgerhq/ldls-ui-react';
const CustomButton = (props: ButtonProps) => {
return <Button {...props} className='custom-button' />;
};📋 API Reference
Each component exports:
- Component - The React component
- Props interface - TypeScript interface for props
- Variants - Available styling variants
For detailed API documentation, visit our Storybook.
🤝 Contributing
This package is part of the Ledger Design System monorepo.
To contribute:
- Visit the main repository
- Read our Contributing Guide
- Check the Development Setup