Skip to main content

Get Started: For Developers

Welcome to Teardrop Design System! This guide will help you get started using Teardrop in your development work.

Installation​

NPM​

npm install @hardwater/teardrop

Yarn​

yarn add @hardwater/teardrop

Package Manager​

pnpm add @hardwater/teardrop

Quick Start​

Basic Setup​

import { Button, Box, Stack } from '@hardwater/teardrop';
import '@hardwater/teardrop/dist/teardrop.css';

function App() {
  return (
    <Box padding="medium">
      <Stack gap="medium">
        <Button variant="primary">Click me</Button>
        <Button variant="secondary">Or me</Button>
      </Stack>
    </Box>
  );
}

Theme Configuration​

Teardrop supports multiple brands. Configure your theme:

import { ThemeProvider } from '@hardwater/teardrop';
import { hardwaterTheme } from '@hardwater/teardrop/themes/hardwater';
import { hardwaterStudiosTheme } from '@hardwater/teardrop/themes/hardwater-studios';

// For Hardwater (parent brand)
<ThemeProvider theme={hardwaterTheme}>
  <App />
</ThemeProvider>

// For Hardwater Studios (sub-brand)
<ThemeProvider theme={hardwaterStudiosTheme}>
  <App />
</ThemeProvider>

Environment Configuration​

TypeScript​

Teardrop includes full TypeScript support. Types are automatically included with the package.

import { ButtonProps } from '@hardwater/teardrop';

const MyButton: React.FC<ButtonProps> = (props) => {
  // Your implementation
};

ESLint Plugin​

Install and configure the Teardrop ESLint plugin:

npm install --save-dev @hardwater/eslint-plugin-teardrop

Add to your .eslintrc:

{
  "plugins": ["@hardwater/teardrop"],
  "rules": {
    "@hardwater/teardrop/no-deprecated-components": "error"
  }
}

Component Usage​

Importing Components​

// Import individual components (tree-shakeable)
import { Button } from '@hardwater/teardrop';

// Import multiple components
import { Button, Badge, Flag } from '@hardwater/teardrop';

Using Primitives​

import { Box, Stack, Inline } from '@hardwater/teardrop';

// Box - Generic container
<Box padding="large" backgroundColor="neutral.100">
  Content here
</Box>

// Stack - Vertical layout
<Stack gap="medium" align="stretch">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

// Inline - Horizontal layout
<Inline gap="small" align="center">
  <Button>Action 1</Button>
  <Button>Action 2</Button>
</Inline>

Styling​

CSS Variables​

Teardrop uses CSS variables for theming. You can override them:

:root {
  --teardrop-color-primary: #0065ff;
  --teardrop-spacing-medium: 16px;
}

Styled Components​

If you're using styled-components:

import styled from 'styled-components';
import { getToken } from '@hardwater/teardrop';

const CustomBox = styled.div`
  padding: ${getToken('spacing.medium')};
  background-color: ${getToken('color.background.neutral')};
`;

Testing​

Component Testing​

import { render, screen } from '@testing-library/react';
import { Button } from '@hardwater/teardrop';

test('renders button', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Accessibility Testing​

Teardrop components are built with accessibility in mind. Use tools like:

Browser Support​

Teardrop supports:

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • iOS Safari (latest)
  • Chrome Android (latest)

Resources​

Getting Help​

  • GitHub Issues - Report bugs or request features
  • Documentation - Check the full documentation
  • Design System Team - Reach out for questions

Next Steps​

  1. Install the package
  2. Set up your theme
  3. Explore components
  4. Review design tokens