SSA UI kit

SSA UI kit is an open-source React-based library combining multiple UI Components, Widgets, Blocks, and Forms classified by application area and implemented following Atomic design principles.

SSA UI kit includes Figma design, integration with Firebase and examples of implementation for different business domains.

SSA UI kit was founded and is supported by SSA Group. The SSA UI kit source code is available under the MIT License.

We regularly post updates, new components, and improvements for the SSA UI kit on our blog: https://www.ssa.group/blog/ssa-ui-kit/ Please feel free to follow along.

🧠 Mental Model

SSA UI kit components are designed with the following principles:

• Composable & Flexible: Components use composition patterns and compound components for maximum flexibility
• Form-First: Form controls integrate seamlessly with React Hook Form for validation and state management
• Type-Safe: Full TypeScript support with comprehensive type definitions and JSDoc examples
• Accessible by Default: Components follow WAI-ARIA patterns and semantic HTML
• Themeable: Built on Emotion for CSS-in-JS styling with a centralized theme system
• Controlled & Uncontrolled: Components support both controlled and uncontrolled patterns

Component Patterns

Form Controls: Most form inputs integrate with React Hook Form. Use register prop for uncontrolled inputs, or value/onChange for controlled patterns.

Compound Components: Many components like Table, Modal, Field, and Dropdown use compound component patterns for flexible composition.

Status Props: Components use consistent prop naming like status (for validation states), disabled (for disabled state), and variant (for visual variants).

Controlled & Uncontrolled: Form controls follow the React convention — checked/defaultChecked for booleans, value/defaultValue for everything else.

Prop renames (v3.20). The library is converging on the names the DOM, MUI, Radix and Ant use. Each old prop still works and warns once per component in development; all are removed at the next major.

Old	New	Components
isDisabled	disabled	15 components
isChecked	checked	Radio
initialState	defaultChecked	Checkbox
externalState	checked	Checkbox
externalState, selectedItem	value	RadioGroup, ButtonGroup
selectedItems / defaultSelectedItems	value / defaultValue	Typeahead
color / defaultColor	value / defaultValue	ColorPicker
ariaLabel	aria-label	Breadcrumbs, Pagination
ariaLabelledby	aria-labelledby	CardContent, DropdownOptions, MultipleDropdownOptions, DropdownToggle
ariaControls	aria-controls	Accordion, Tab, LargeTab, DropdownToggle
opened / defaultOpened	open / defaultOpen	Drawer, useDrawer
opened / defaultOpened / onOpenedChange	open / defaultOpen / onOpenChange

🚀 Hero Example

Get started in 60 seconds. Here's a complete example showing Card, Button, Input, and Table working together:

This is the beginning of the README. Read the rest at the original. Read the full README ↗