Contributing to ColorSnap UI
Welcome! We appreciate every contribution — whether it's a bug fix, a new component, a theme, or a documentation improvement. This guide walks you through the process from fork to pull request.
💡 First time? Start with issues labeled good first issue on GitHub.
Ways to Contribute
- Report bugs — Open a GitHub issue with steps to reproduce and expected vs. actual behavior
- Fix bugs — Submit a PR with a focused fix and a clear commit message
- New components — Follow the component checklist below
- New themes — Add a theme file following the theme format
- Improve docs — Fix typos, add examples, clarify explanations
- Submit showcase projects — Built something with ColorSnap? Add it to the showcase
Getting Started
1
Fork the repository
Go to github.com/axk42-op/ColorSnap and click Fork.
2
Clone and install
git clone https://github.com/YOUR-USERNAME/ColorSnap.git
cd ColorSnap
npm install
npm run dev
3
Create a branch
git checkout -b feat/my-new-component
4
Make changes and submit a PR
git add .
git commit -m "feat: add NumberInput component"
git push origin feat/my-new-component
Adding a New Component
- Create in
components/ComponentName/ComponentName.jsx - Accept
classNameand...propsspread on the root element - Use
cn()fromutils/cn.jsfor class merging - Use
var(--cs-*)CSS variables — never hardcode colors - Wrap with
forwardRef - Support
disabledandloadingprops where relevant - Export from
components/index.js
Adding a New Theme
// themes/mytheme.js
export const mytheme = {
name: 'mytheme',
vars: {
'--cs-primary': '#yourcolor',
'--cs-primary-hover': '#darkershade',
'--cs-background': '#yourbg',
'--cs-surface': '#yoursurface',
'--cs-text': '#yourtext',
'--cs-text-muted': '#yourmuted',
'--cs-border': '#yourborder',
'--cs-radius': '10px',
'--cs-shadow': '0 4px 20px rgba(0,0,0,0.2)',
'--cs-glow': 'none',
}
};
Commit Message Format
We follow conventional commits. Keep the subject line under 72 characters.
feat: add Carousel componentfix: button disabled hover statedocs: update installation guidetheme: add nordic themechore: update dependencies
Code Style
- Formatting — 2-space indentation, single quotes, trailing commas where valid
- Components — Functional components with hooks; no class components
- Naming — PascalCase for components, camelCase for functions and variables
- CSS — Use
var(--cs-*)tokens exclusively; no hardcoded hex values in component styles - Accessibility — Include ARIA attributes, keyboard support, and visible focus states
- Props — Destructure props at the top; spread remaining props to the root element
License
By contributing you agree your contribution will be licensed under the ColorSnap Source Available License (CSAL) v1.0. Read the full license page for permitted uses and commercial terms.