@useloops/design-system

The design system for the Loops platform and marketing website.

Generating new components

New components can be generated using npm run component.

Synchronising icons with Figma

• Create a personal access token in Figma in Settings > Security > Personal access tokens
• Create .env file in scripts/useloops-icon-generator/.env
• Install packages: cd scripts/useloops-icon-generator && npm install
• Run npm run icons from the root dir
• Check the Brand Core/Icons story in storybook, verify expected icons have been updated

Importing from @useloops/design-system

This package now supports both barrel imports and individual component imports for better tree-shaking and reduced bundle sizes.

Import Methods

1. Barrel Import (Default - imports everything)

import { Button, Avatar, Typography } from '@useloops/design-system';

2. System-Level Imports

Import all components from a specific system:

// WebCore components
import { Button, Avatar, Typography } from '@useloops/design-system/WebCore';

// Platform components
import { Navigation, Header, KpiIndicator } from '@useloops/design-system/Platform';

// BrandCore
import { Icon } from '@useloops/design-system/BrandCore';

// Marketing components
import { PlanTierCard, TickGroup } from '@useloops/design-system/Marketing';

// Theme
import { ThemeProvider, useTheme } from '@useloops/design-system/theme';

// Utils
import { emailValidation, passwordValidation } from '@useloops/design-system/utils';

3. Individual Component Imports (Best for tree-shaking)

Import components individually for optimal bundle size:

import Button from '@useloops/design-system/WebCore/Button';
import Avatar from '@useloops/design-system/WebCore/Avatar';
import Typography from '@useloops/design-system/WebCore/Typography';
import TextField from '@useloops/design-system/WebCore/TextField';

// Platform components
import Navigation from '@useloops/design-system/Platform/Navigation';
import KpiIndicator from '@useloops/design-system/Platform/KpiIndicator';

// BrandCore components
import Icon from '@useloops/design-system/BrandCore/Icon';

// Marketing components
import PlanTierCard from '@useloops/design-system/Marketing/PlanTierCard';

Benefits of Individual Imports

• Smaller Bundle Size: Only include the components you actually use
• Faster Build Times: Less code to process during bundling
• Better Tree-Shaking: Modern bundlers can more easily eliminate unused code
• Clearer Dependencies: Explicitly see which components are being used

Migration Guide

To migrate from barrel imports to individual imports:

Before:

import { Button, Avatar, Typography, TextField } from '@useloops/design-system';

After (Option 1 - System Level):

import { Button, Avatar, Typography, TextField } from '@useloops/design-system/WebCore';

After (Option 2 - Individual):

import Button from '@useloops/design-system/WebCore/Button';
import Avatar from '@useloops/design-system/WebCore/Avatar';
import Typography from '@useloops/design-system/WebCore/Typography';
import TextField from '@useloops/design-system/WebCore/TextField';

Available Systems

• BrandCore: Brand-specific components (Icon)
• Marketing: Marketing page components (PlanTierCard, TickGroup, PlanFeatureTable)
• Platform: Platform-specific components (Navigation, Header, KpiIndicator, etc.)
• WebCore: Core web components (Button, Avatar, TextField, Typography, etc.)
• theme: Theme configuration and provider
• utils: Utility functions and validation helpers

TypeScript Support

All import methods include full TypeScript support with proper type definitions:

import Button, { ButtonProps } from '@useloops/design-system/WebCore/Button';
import { ThemeProvider } from '@useloops/design-system/theme';