Skip to main content

Usage Guide

Learn how to use Lufa Design System components in your React applications.

Basic Component Usage​

Import components from the main package:

src/App.tsx
import { Badge, Box, Button, Icon, Stack, Text } from '@grasdouble/lufa_design-system';

function App() {
  return (
    <Box padding="default" background="surface">
      <Stack direction="vertical" spacing="comfortable">
        <Text as="h1" variant="h1">
          Welcome to Lufa
        </Text>
        <Text>Start building with our components.</Text>
        <Button appearance="solid" variant="primary" size="md">
          Get Started
        </Button>
      </Stack>
    </Box>
  );
}

Component Composition​

Lufa components are designed to work together seamlessly:

import { Badge, Box, Divider, Stack, Text } from '@grasdouble/lufa_design-system';

function StatusCard() {
  return (
    <Box padding="comfortable" background="surface" borderRadius="base">
      <Stack direction="vertical" spacing="compact">
        <Stack direction="horizontal" spacing="compact" align="center">
          <Text as="h2" variant="h2">
            Project Status
          </Text>
          <Badge variant="success">Active</Badge>
        </Stack>
        <Divider />
        <Text>Your project is running smoothly.</Text>
      </Stack>
    </Box>
  );
}

Using Design Tokens​

Components use design tokens internally, but you can also use them directly:

import tokens from '@grasdouble/lufa_design-system-tokens';

function CustomComponent() {
  const customStyles = {
    padding: tokens.spacing.default,
    fontSize: tokens.fontSize.body,
    color: tokens.color.text.primary,
  };

  return <div style={customStyles}>Custom styled content</div>;
}

Responsive Layouts​

Use the Stack component for flexible, responsive layouts:

import { Box, Stack, Text } from '@grasdouble/lufa_design-system';

function ResponsiveGrid() {
  return (
    <Stack direction="horizontal" spacing="comfortable" wrap={true}>
      <Box padding="default" background="surface" style={{ flex: '1 1 300px' }}>
        <Text as="h3" variant="h3">
          Card 1
        </Text>
      </Box>
      <Box padding="default" background="surface" style={{ flex: '1 1 300px' }}>
        <Text as="h3" variant="h3">
          Card 2
        </Text>
      </Box>
      <Box padding="default" background="surface" style={{ flex: '1 1 300px' }}>
        <Text as="h3" variant="h3">
          Card 3
        </Text>
      </Box>
    </Stack>
  );
}

Accessibility Best Practices​

All components follow accessibility best practices by default:

import { Button, Icon, Text } from '@grasdouble/lufa_design-system';

function AccessibleButton() {
  return (
    <Button variant="primary" aria-label="Delete item">
      <Icon name="trash" decorative />
      <Text>Delete</Text>
    </Button>
  );
}

TypeScript Support​

Full TypeScript type definitions are included:

import type { BoxProps, StackProps, TextProps } from '@grasdouble/lufa_design-system';
import { Box, Stack, Text } from '@grasdouble/lufa_design-system';

type CardProps = {
  title: string;
  children: React.ReactNode;
} & BoxProps;

function Card({ title, children, ...boxProps }: CardProps) {
  return (
    <Box padding="comfortable" background="surface" {...boxProps}>
      <Stack direction="vertical" spacing="compact">
        <Text as="h3" variant="h3">
          {title}
        </Text>
        {children}
      </Stack>
    </Box>
  );
}

Next Steps​

Interactive Examples

Try components in the Interactive Playground and see them adapt to different theme modes!