Ketchup Next Gen
Ketchup2 is a TypeScript-first React component library designed specifically for Smeup business applications. It provides:
- Pre-built UI components organized by domain (basic, functional, and complex components)
- Data-driven architecture that works seamlessly with Smeup data structures
- Design system integration with consistent tokens for colors, spacing, and typography
- Comprehensive documentation via Storybook and MDX guides
- Full test coverage with unit and visual regression testing
Key Focus: Building enterprise-grade business UIs with Smeup-specific data patterns and accessibility in mind.
Getting started
See prerequisite and Init docs page to start working on the library.
Development
See Project Structure to learn how the project is structured. See Styleguide to learn our convention. See First Example to gain confidence creating your first component
Validation
Visual Regression Testing
- Canonical VRT environment is Docker (Linux + Playwright image).
- Run local VRT with the same setup used in CI:
docker compose run --rm vrtnpm run test:vrt
- Update snapshots locally:
npm run test:vrt:update
- CI can also regenerate snapshots when PR has label
update snapshots(or via manual dispatch input).
Shapes and Components
If you want to know what shapes/components are currently supported you can checkout here:
Shapes Status
Component Status
Allowed components data formats
This component library is designed to work strictly with a predefined set of data formats. This ensures consistency, reliability, and full interoperability within the library and for all its consumers. Data formats