Wallarm Design System

Modern React component library for building user interfaces.

📚 Documentation

All documentation is available in:

• Storybook - Interactive component examples
• Installation Guide - Setup instructions
• Getting Started - Introduction and overview

Run Storybook locally:

pnpm storybook

🚀 Quick Start

See Installation Guide for detailed setup instructions.

Basic Example

// App.tsx
import { ThemeProvider } from '@wallarm-org/design-system/ThemeProvider';
import { Button } from '@wallarm-org/design-system/Button';
import './App.css';

export const App = () => {
  return (
    <ThemeProvider defaultTheme="light">
      <Button variant="primary">Hello, World!</Button>
    </ThemeProvider>
  );
};

/* App.css */
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'non.geist';
@import 'non.geist/mono';
@import '@wallarm-org/design-system/theme';

body {
    background-color: var(--color-bg-surface-1)
}

✨ Features

• 40+ components - Complete set of UI elements
• React 19 - Latest React version
• TypeScript - Full type safety
• Tailwind CSS v4 - Modern styling system
• Geist font - Modern typography (non.geist)
• Animations - Built-in animations (tw-animate-css)
• Theming - Light and dark themes
• Accessibility - ARIA compliance
• Tree-shaking - Optimal bundle size

📦 Core Components

• Buttons and controls - Button, Link, ToggleButton
• Forms - Input, Select, Checkbox, Radio, Switch
• Feedback - Alert, Toast, Tooltip, Loader
• Modals - Dialog, Drawer, Popover
• Navigation - Tabs, Breadcrumbs, SegmentedControl
• Layout - Stack, Flex, ScrollArea
• Data display - Badge, Tag, Code

🛠 Development

# Clone repository
git clone https://github.com/wallarm/design-system.git
cd wallarm-design-system

# Install dependencies
pnpm install

# Run Storybook
pnpm storybook

# Run tests
pnpm test

# Build library
pnpm build

📖 Resources

• Storybook - Interactive examples
• NPM - NPM package
• GitHub - Source code

📄 License

MIT © Wallarm