@yourname/basketball-training-ui

Basketball Training brand component library with custom theme and Storybook.

Installation

pnpm add @yourname/basketball-training-ui

Usage

import { Button } from '@yourname/basketball-training-ui';
import '@yourname/basketball-training-ui/dist/theme/styles.css';

export const App = () => {
    return (
        <div>
            <Button variant="primary">Start Training</Button>
            <Button variant="secondary">View Stats</Button>
            <Button variant="outline">Learn More</Button>
        </div>
    );
};

Development

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build library
pnpm build

# Run tests
pnpm test

# Lint
pnpm lint

Brand Colors

• Primary Orange: #FF6B35 - Basketball brand color
• Black: #1A1A1A - Text and backgrounds
• Court Wood: #C19A6B - Basketball court accent

Components

Button

<Button variant="primary" size="md">
    Click me
</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline'
• size: 'sm' | 'md' | 'lg'
• disabled: boolean

License

MIT