Component Page Template

Component Name

Component Name provides a brief, impactful way to [describe component’s main purpose]. Use it to [primary use case] across your application.

Basic example

A minimal implementation of the Component with default settings.

<Component variant='primary'>Default Component</Component>

Component API

Properties

Property	Type	Default	Description
variant	'primary' | 'secondary' | 'outlined'	'primary'	Determines the visual style of the component
size	'sm' | 'md' | 'lg'	'md'	Controls the size of the component
disabled	boolean	false	When true, disables the component
onClick	function	-	Function to be called when the component is clicked

CSS Variables

Variable	Default	Description
--component-primary-color	#3b82f6	Primary color used for the component
--component-secondary-color	#6b7280	Secondary color used for styling
--component-radius	0.375rem	Border radius for component edges

Variants

Primary

The default variant with solid background color.

<Component variant='primary'>Primary Component</Component>

<Preview>
    <Component variant='primary'>Primary Component</Component>
</Preview>

Secondary

A less prominent style for secondary actions.

<Component variant='secondary'>Secondary Component</Component>

<Preview>
    <Component variant='secondary'>Secondary Component</Component>
</Preview>

Outlined

A bordered style with transparent background.

<Component variant='outlined'>Outlined Component</Component>

<Preview>
    <Component variant='outlined'>Outlined Component</Component>
</Preview>

Sizes

Small

<Component size='sm'>Small Component</Component>

<Preview>
    <Component size='sm'>Small Component</Component>
</Preview>

Medium (Default)

<Component size='md'>Medium Component</Component>

<Preview>
    <Component size='md'>Medium Component</Component>
</Preview>

Large

<Component size='lg'>Large Component</Component>

<Preview>
    <Component size='lg'>Large Component</Component>
</Preview>

States

Disabled

<Component disabled>Disabled Component</Component>

<Preview>
    <Component disabled>Disabled Component</Component>
</Preview>

Loading

<Component loading>Loading...</Component>

<Preview>
    <Component loading>Loading...</Component>
</Preview>

Usage with icons

Leading icon

<Component>
    <IconLeading />
    Leading Icon
</Component>

<Preview>
    <Component>
        <IconLeading />
        Leading Icon
    </Component>
</Preview>

Trailing icon

<Component>
    Trailing Icon
    <IconTrailing />
</Component>

<Preview>
    <Component>
        Trailing Icon
        <IconTrailing />
    </Component>
</Preview>

Accessibility

The Component follows WAI-ARIA practices for accessibility:

• Uses appropriate semantic elements
• Supports keyboard navigation
• Includes proper ARIA attributes
• Maintains sufficient color contrast

Best practices

• Use primary variants for main actions
• Choose secondary or outlined variants for less important actions
• Maintain consistent spacing around components
• Use clear, concise labels
• Pair with icons only when they add meaning

Implementation

Installation

npm install @your-library/component

Basic implementation

import { Component } from '@your-library/component';

function App() {
    return (
        <div>
            <Component variant='primary' onClick={() => console.log('Clicked!')}>
                Click Me
            </Component>
        </div>
    );
}

Design guidelines

• Allow for ample whitespace around the component
• Maintain consistent padding and margin patterns
• Use color to communicate intent or state
• Follow your design system’s color and typography rules

Customization

Using CSS variables

:root {
    --component-primary-color: #8b5cf6;
    --component-secondary-color: #a78bfa;
    --component-radius: 0.5rem;
}

Using the theme provider

<ThemeProvider
    theme={{
        component: {
            primaryColor: '#8b5cf6',
            secondaryColor: '#a78bfa',
            borderRadius: '0.5rem',
        },
    }}>
    <App />
</ThemeProvider>

Examples

Form submission

<form onSubmit={handleSubmit}>
    <Input name='email' />
    <Component type='submit'>Submit Form</Component>
</form>

Group of components

<ComponentGroup>
    <Component variant='primary'>Save</Component>
    <Component variant='outlined'>Cancel</Component>
</ComponentGroup>

<Preview>
    <ComponentGroup>
        <Component variant='primary'>Save</Component>
        <Component variant='outlined'>Cancel</Component>
    </ComponentGroup>
</Preview>

Related components

• Link - For navigation between pages
• IconButton - For icon-only actions
• ButtonGroup - For grouping related actions

Frequently asked questions

How do I change the component’s color?

You can override the CSS variables or use the theme provider to change the colors across your application.

Can I use custom icons?

Yes, you can pass any icon component as a child to the Component.

How do I handle form submissions?

When used within a form, set the type property to “submit” to trigger the form’s submit event.