A React version of TheSprkl UI Kit
Table of contents
- Get started
- Components
- General info_components
- Alert (not available in promo)
- Avatar
- Box
- Breadcrumbs (not available in promo)
- Buttons (only one button type in promo)
- Checkbox (not available in promo)
- Collapse (not available in promo)
- Dropdown (not available in promo)
- Radio (not available in promo)
- Input
- List (not available in promo)
- Stepper (not available in promo)
- Tabs (not available in promo)
- Tag (not available in promo)
- Toggle (not available in promo)
- Tooltip (not available in promo)
- Typography
Get started
General info
To start using the react_sprkl UI Kit, the user must have an initialized React project. This is a mono repository built on yarn workspaces and parcels. You can use it out of the box, or create your own project. There are TheSprkll UI Kit dependencies:
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.4.2",
"styled-components": "^5.3.6",
"react-device-detect": "^2.2.2",
"use-react-router-breadcrumbs": "^4.0.1"
If you decide to use yarn workspaces you need to clone that repo and type:
yarn
to install the dependencies.
Theme setup
TheSprkl theme setup is built on
"styled-components": "^5.3.6"
package. TheSprkl theme has set up colors and text styles used by TheSprkl components.
You have object:
primary900: primaryColor || '#421C86',
primary800: primaryColor ? hexToRgbaToRgb(primaryColor, 0.9) : '#501FA8',
primary700: primaryColor ? hexToRgbaToRgb(primaryColor, 0.8) : '#6125CE',
primary600: primaryColor ? hexToRgbaToRgb(primaryColor, 0.7) : '#7034E4',
primary500: primaryColor ? hexToRgbaToRgb(primaryColor, 0.6) : '#7F52EE',
primary400: primaryColor ? hexToRgbaToRgb(primaryColor, 0.5) : '#9C80F4',
primary300: primaryColor ? hexToRgbaToRgb(primaryColor, 0.4) : '#BCACF9',
primary200: primaryColor ? hexToRgbaToRgb(primaryColor, 0.3) : '#D8D0FC',
primary100: primaryColor ? hexToRgbaToRgb(primaryColor, 0.2) : '#EAE6FD',
primary50: primaryColor ? hexToRgbaToRgb(primaryColor, 0.15) : '#F3F1FE',
accent900: accentColor || '#77193A',
accent800: accentColor ? hexToRgbaToRgb(accentColor, 0.9) : '#921943',
accent700: accentColor ? hexToRgbaToRgb(accentColor, 0.8) : '#B51A52',
accent600: accentColor ? hexToRgbaToRgb(accentColor, 0.7) : '#D5266B',
accent500: accentColor ? hexToRgbaToRgb(accentColor, 0.6) : '#E8418D',
accent400: accentColor ? hexToRgbaToRgb(accentColor, 0.5) : '#F168AB',
accent300: accentColor ? hexToRgbaToRgb(accentColor, 0.4) : '#F79FCC',
accent200: accentColor ? hexToRgbaToRgb(accentColor, 0.3) : '#FAC9E4',
accent100: accentColor ? hexToRgbaToRgb(accentColor, 0.2) : '#FBE4F1',
accent50: accentColor ? hexToRgbaToRgb(accentColor, 0.15) : '#FDF0F7',
neutrals900: neutralsColor || '#111827',
neutrals800: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.9) : '#1F2937',
neutrals700: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.8) : '#374151',
neutrals600: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.7) : '#4B5563',
neutrals500: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.6) : '#6B7280',
neutrals400: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.5) : '#9CA3AF',
neutrals300: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.4) : '#D1D5DB',
neutrals200: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.3) : '#E5E7EB',
neutrals100: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.2) : '#F3F4F6',
neutrals50: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.15) : '#F9FAFB',
error900: errorColor || '#7F1D1D',
error800: errorColor ? hexToRgbaToRgb(errorColor, 0.9) : '#991B1B',
error700: errorColor ? hexToRgbaToRgb(errorColor, 0.8) : '#B91C1C',
error600: errorColor ? hexToRgbaToRgb(errorColor, 0.7) : '#DC2626',
error500: errorColor ? hexToRgbaToRgb(errorColor, 0.6) : '#EF4444',
error400: errorColor ? hexToRgbaToRgb(errorColor, 0.5) : '#F87171',
error300: errorColor ? hexToRgbaToRgb(errorColor, 0.4) : '#FCA5A5',
error200: errorColor ? hexToRgbaToRgb(errorColor, 0.3) : '#FECACA',
error100: errorColor ? hexToRgbaToRgb(errorColor, 0.2) : '#FEE2E2',
error50: errorColor ? hexToRgbaToRgb(errorColor, 0.15) : '#FEF2F2',
warning900: warningColor || '#7C2D12',
warning800: warningColor ? hexToRgbaToRgb(warningColor, 0.9) : '#9A3412',
warning700: warningColor ? hexToRgbaToRgb(warningColor, 0.8) : '#C2410C',
warning600: warningColor ? hexToRgbaToRgb(warningColor, 0.7) : '#EA580C',
warning500: warningColor ? hexToRgbaToRgb(warningColor, 0.6) : '#F97316',
warning400: warningColor ? hexToRgbaToRgb(warningColor, 0.5) : '#FB923C',
warning300: warningColor ? hexToRgbaToRgb(warningColor, 0.4) : '#FDBA74',
warning200: warningColor ? hexToRgbaToRgb(warningColor, 0.3) : '#FED7AA',
warning100: warningColor ? hexToRgbaToRgb(warningColor, 0.2) : '#FFEDD5',
warning50: warningColor ? hexToRgbaToRgb(warningColor, 0.15) : '#FFF7ED',
success900: successColor || '#14532D',
success800: successColor ? hexToRgbaToRgb(successColor, 0.9) : '#166534',
success700: successColor ? hexToRgbaToRgb(successColor, 0.8) : '#15803D',
success600: successColor ? hexToRgbaToRgb(successColor, 0.7) : '#16A34A',
success500: successColor ? hexToRgbaToRgb(successColor, 0.6) : '#22C55E',
success400: successColor ? hexToRgbaToRgb(successColor, 0.5) : '#4ADE80',
success300: successColor ? hexToRgbaToRgb(successColor, 0.4) : '#86EFAC',
success200: successColor ? hexToRgbaToRgb(successColor, 0.3) : '#BBF7D0',
success100: successColor ? hexToRgbaToRgb(successColor, 0.2) : '#DCFCE7',
success50: successColor ? hexToRgbaToRgb(successColor, 0.15) : '#DCFCE7',
info900: infoColor || '#1E3A8A',
info800: infoColor ? hexToRgbaToRgb(infoColor, 0.9) : '#1E40AF',
info700: infoColor ? hexToRgbaToRgb(infoColor, 0.8) : '#1D4ED8',
info600: infoColor ? hexToRgbaToRgb(infoColor, 0.7) : '#2563EB',
info500: infoColor ? hexToRgbaToRgb(infoColor, 0.6) : '#3B82F6',
info400: infoColor ? hexToRgbaToRgb(infoColor, 0.5) : '#60A5FA',
info300: infoColor ? hexToRgbaToRgb(infoColor, 0.4) : '#93C5FD',
info200: infoColor ? hexToRgbaToRgb(infoColor, 0.3) : '#BFDBFE',
info100: infoColor ? hexToRgbaToRgb(infoColor, 0.2) : '#DBEAFE',
info50: infoColor ? hexToRgbaToRgb(infoColor, 0.15) : '#EFF6FF',
black100: 'rgba(0 0 0)',
black88: 'rgba(0 0 0 / 88%)',
black80: 'rgba(0 0 0 / 80%)',
black72: 'rgba(0 0 0 / 72%)',
black64: 'rgba(0 0 0 / 64%)',
black56: 'rgba(0 0 0 / 56%)',
black48: 'rgba(0 0 0 / 48%)',
black40: 'rgba(0 0 0 / 40%)',
black32: 'rgba(0 0 0 / 32%)',
black24: 'rgba(0 0 0 / 24%)',
black16: 'rgba(0 0 0 / 16%)',
black8: 'rgba(0 0 0 / 8%)',
white100: 'rgba(255 255 255)',
white88: 'rgba(255 255 255 / 88%)',
white80: 'rgba(255 255 255 / 80%)',
white72: 'rgba(255 255 255 / 72%)',
white64: 'rgba(255 255 255 / 64%)',
white56: 'rgba(255 255 255 / 56%)',
white48: 'rgba(255 255 255 / 48%)',
white40: 'rgba(255 255 255 / 40%)',
white32: 'rgba(255 255 255 / 32%)',
white24: 'rgba(255 255 255 / 24%)',
white16: 'rgba(255 255 255 / 16%)',
white8: 'rgba(255 255 255 / 8%)',
},
spacings: {
z: '0',
xxs: '2px',
xs: '4px',
s: '8px',
m: '12px',
l: '16px',
xl: '24px',
xxl: '48px',
xxxl: '64px',
},
corners: {
s: '4px',
m: '6px',
l: '8px',
xl: '16px',
round: '10000px',
},
bodyText: {
l: 'font-size: 1.25rem; line-height: 1.2;',
m: 'font-size: 1rem;',
s: 'font-size: 0.875rem; letter-spacing: 0rem;',
...bodyTextStyles,
},
headlineText: {
l: 'font-size: 3.5rem; letter-spacing: -0.125rem; line-height: 1.1;',
xl: 'font-size: 3rem; letter-spacing: -0.08125rem; line-height: 1.1;',
m: 'font-size: 2rem; letter-spacing: -0.05rem;',
s: 'font-size: 1.75rem; letter-spacing: -0.025rem;',
xs: 'font-size: 1.5rem; letter-spacing: -0.015rem;',
xxs: 'font-size: 1.25rem; letter-spacing: -0.015rem;',
...headlineTextStyles,
},
labelText: { m: 'font-size: 1rem;', s: 'font-size: 0.875rem;', ...labelTextStyle },
supportText: {
quote:
'font-family: IBM Plex Sans; font-style: normal; font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.24px;',
overline:
'font-family: IBM Plex Sans; font-style: normal; font-weight: 700; font-size: 14px; line-height: 16px; text-transform: uppercase',
caption:
'font-family: Inter; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: -0.24px',
...supportTextStyle,
},
primaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...primaryButtonStyle,
},
ghostButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...ghostButton,
},
outlineButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...outlineButton,
},
secondaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...secondaryButton,
},
tertiaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...tertiaryButton,
},
You can provide colors to generate a palette from one color.
Here is how it looks like:
<Theme
primaryColor="#8B5CF6"
accentColor="#34D399"
warningColor="#F43E5E"
infoColor="#0EA5E9"
neutrals900="#0EA5E9"
error900="#0EA5E9"
success900="#0EA5E9"
>
<App />
</Theme>
To use colors you need to provide a color as a string
<PrimaryButton background='accent900'>
Sign up
</PrimaryButton>
Or you can provide your own color:
<PrimaryButton background='red'>
Sign up
</PrimaryButton>
You can create your own style types of objects or overwrite the existing ones
Text:
bodyText: {
l: 'font-size: 1.25rem; line-height: 1.2;',
m: 'font-size: 1rem;',
s: 'font-size: 0.875rem; letter-spacing: 0rem;',
...bodyTextStyles,
},
headlineText: {
l: 'font-size: 3.5rem; letter-spacing: -0.125rem; line-height: 1.1;',
xl: 'font-size: 3rem; letter-spacing: -0.08125rem; line-height: 1.1;',
m: 'font-size: 2rem; letter-spacing: -0.05rem;',
s: 'font-size: 1.75rem; letter-spacing: -0.025rem;',
xs: 'font-size: 1.5rem; letter-spacing: -0.015rem;',
xxs: 'font-size: 1.25rem; letter-spacing: -0.015rem;',
xxxs: 'font-size: 18px; line-height: 22px; letter-spacing: -0.24px;',
xxxxs: 'font-size: 14px; line-height: 20px; letter-spacing: -0.2px;',
...headlineTextStyles,
},
labelText: { m: 'font-size: 1rem;', s: 'font-size: 0.875rem;', ...labelTextStyle },
supportText: {
quote:
'font-family: IBM Plex Sans; font-style: normal; font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.24px;',
overline:
'font-family: IBM Plex Sans; font-style: normal; font-weight: 700; font-size: 14px; line-height: 16px; text-transform: uppercase',
caption:
'font-family: Inter; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: -0.24px',
...supportTextStyle,
},
primaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...primaryButtonStyle,
},
ghostButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...ghostButton,
},
outlineButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...outlineButton,
},
secondaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...secondaryButton,
},
tertiaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...tertiaryButton,
},
There is usage:
<Theme
bodyTextStyles={{ red: 'color: red' }}
tertiaryButton={{ red: 'color: red' }}
primaryColor="#8B5CF6"
accentColor="#34D399"
warningColor="#F43E5E"
infoColor="#0EA5E9"
>
<App />
</Theme>
Now you have a new type in the component. To use it you need to provide the name of that object in the type of the property
<BodyText type="red">Red text</BodyText>
<TertiaryButton styleType="red">Red text button</TertiaryButton>
to overwrite the existing:
<Theme
bodyTextStyles={{ m: 'color: red' }}
tertiaryButton={{ m: 'color: red' }}
primaryColor="#8B5CF6"
accentColor="#34D399"
warningColor="#F43E5E"
infoColor="#0EA5E9"
>
<App />
</Theme>
Now default type "m" is overwritten:
<BodyText type="m">Red text</BodyText>
<TertiaryButton styleType="m">Red text button</TertiaryButton>
Also, you have preset margins and corners:
spacings: {
z: '0',
xxs: '2px',
xs: '4px',
s: '8px',
m: '12px',
l: '16px',
xl: '24px',
xxl: '48px',
xxxl: '64px',
},
corners: {
s: '4px',
m: '6px',
l: '8px',
xl: '16px',
round: '10000px',
},
You can use them when providing margins or padding and border-radius in components. Also, you can combine letters and px. Example:
<PrimaryButton borderRadius='l' margin="l 10px" size="m" width="100%">
Sign up
</PrimaryButton>
Components
General info_components
cornersType represents object or string (any value - example: 'l' or '10px')
corners: {
s: '4px',
m: '6px',
l: '8px',
xl: '16px',
round: '10000px',
},
colorsType represents object or string (any color - example: 'primary900' or '#ffff')
primary900: primaryColor || '#421C86',
primary800: primaryColor ? hexToRgbaToRgb(primaryColor, 0.9) : '#501FA8',
primary700: primaryColor ? hexToRgbaToRgb(primaryColor, 0.8) : '#6125CE',
primary600: primaryColor ? hexToRgbaToRgb(primaryColor, 0.7) : '#7034E4',
primary500: primaryColor ? hexToRgbaToRgb(primaryColor, 0.6) : '#7F52EE',
primary400: primaryColor ? hexToRgbaToRgb(primaryColor, 0.5) : '#9C80F4',
primary300: primaryColor ? hexToRgbaToRgb(primaryColor, 0.4) : '#BCACF9',
primary200: primaryColor ? hexToRgbaToRgb(primaryColor, 0.3) : '#D8D0FC',
primary100: primaryColor ? hexToRgbaToRgb(primaryColor, 0.2) : '#EAE6FD',
primary50: primaryColor ? hexToRgbaToRgb(primaryColor, 0.15) : '#F3F1FE',
accent900: accentColor || '#77193A',
accent800: accentColor ? hexToRgbaToRgb(accentColor, 0.9) : '#921943',
accent700: accentColor ? hexToRgbaToRgb(accentColor, 0.8) : '#B51A52',
accent600: accentColor ? hexToRgbaToRgb(accentColor, 0.7) : '#D5266B',
accent500: accentColor ? hexToRgbaToRgb(accentColor, 0.6) : '#E8418D',
accent400: accentColor ? hexToRgbaToRgb(accentColor, 0.5) : '#F168AB',
accent300: accentColor ? hexToRgbaToRgb(accentColor, 0.4) : '#F79FCC',
accent200: accentColor ? hexToRgbaToRgb(accentColor, 0.3) : '#FAC9E4',
accent100: accentColor ? hexToRgbaToRgb(accentColor, 0.2) : '#FBE4F1',
accent50: accentColor ? hexToRgbaToRgb(accentColor, 0.15) : '#FDF0F7',
neutrals900: neutralsColor || '#111827',
neutrals800: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.9) : '#1F2937',
neutrals700: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.8) : '#374151',
neutrals600: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.7) : '#4B5563',
neutrals500: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.6) : '#6B7280',
neutrals400: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.5) : '#9CA3AF',
neutrals300: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.4) : '#D1D5DB',
neutrals200: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.3) : '#E5E7EB',
neutrals100: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.2) : '#F3F4F6',
neutrals50: neutralsColor ? hexToRgbaToRgb(neutralsColor, 0.15) : '#F9FAFB',
error900: errorColor || '#7F1D1D',
error800: errorColor ? hexToRgbaToRgb(errorColor, 0.9) : '#991B1B',
error700: errorColor ? hexToRgbaToRgb(errorColor, 0.8) : '#B91C1C',
error600: errorColor ? hexToRgbaToRgb(errorColor, 0.7) : '#DC2626',
error500: errorColor ? hexToRgbaToRgb(errorColor, 0.6) : '#EF4444',
error400: errorColor ? hexToRgbaToRgb(errorColor, 0.5) : '#F87171',
error300: errorColor ? hexToRgbaToRgb(errorColor, 0.4) : '#FCA5A5',
error200: errorColor ? hexToRgbaToRgb(errorColor, 0.3) : '#FECACA',
error100: errorColor ? hexToRgbaToRgb(errorColor, 0.2) : '#FEE2E2',
error50: errorColor ? hexToRgbaToRgb(errorColor, 0.15) : '#FEF2F2',
warning900: warningColor || '#7C2D12',
warning800: warningColor ? hexToRgbaToRgb(warningColor, 0.9) : '#9A3412',
warning700: warningColor ? hexToRgbaToRgb(warningColor, 0.8) : '#C2410C',
warning600: warningColor ? hexToRgbaToRgb(warningColor, 0.7) : '#EA580C',
warning500: warningColor ? hexToRgbaToRgb(warningColor, 0.6) : '#F97316',
warning400: warningColor ? hexToRgbaToRgb(warningColor, 0.5) : '#FB923C',
warning300: warningColor ? hexToRgbaToRgb(warningColor, 0.4) : '#FDBA74',
warning200: warningColor ? hexToRgbaToRgb(warningColor, 0.3) : '#FED7AA',
warning100: warningColor ? hexToRgbaToRgb(warningColor, 0.2) : '#FFEDD5',
warning50: warningColor ? hexToRgbaToRgb(warningColor, 0.15) : '#FFF7ED',
success900: successColor || '#14532D',
success800: successColor ? hexToRgbaToRgb(successColor, 0.9) : '#166534',
success700: successColor ? hexToRgbaToRgb(successColor, 0.8) : '#15803D',
success600: successColor ? hexToRgbaToRgb(successColor, 0.7) : '#16A34A',
success500: successColor ? hexToRgbaToRgb(successColor, 0.6) : '#22C55E',
success400: successColor ? hexToRgbaToRgb(successColor, 0.5) : '#4ADE80',
success300: successColor ? hexToRgbaToRgb(successColor, 0.4) : '#86EFAC',
success200: successColor ? hexToRgbaToRgb(successColor, 0.3) : '#BBF7D0',
success100: successColor ? hexToRgbaToRgb(successColor, 0.2) : '#DCFCE7',
success50: successColor ? hexToRgbaToRgb(successColor, 0.15) : '#DCFCE7',
info900: infoColor || '#1E3A8A',
info800: infoColor ? hexToRgbaToRgb(infoColor, 0.9) : '#1E40AF',
info700: infoColor ? hexToRgbaToRgb(infoColor, 0.8) : '#1D4ED8',
info600: infoColor ? hexToRgbaToRgb(infoColor, 0.7) : '#2563EB',
info500: infoColor ? hexToRgbaToRgb(infoColor, 0.6) : '#3B82F6',
info400: infoColor ? hexToRgbaToRgb(infoColor, 0.5) : '#60A5FA',
info300: infoColor ? hexToRgbaToRgb(infoColor, 0.4) : '#93C5FD',
info200: infoColor ? hexToRgbaToRgb(infoColor, 0.3) : '#BFDBFE',
info100: infoColor ? hexToRgbaToRgb(infoColor, 0.2) : '#DBEAFE',
info50: infoColor ? hexToRgbaToRgb(infoColor, 0.15) : '#EFF6FF',
black100: 'rgba(0 0 0)',
black88: 'rgba(0 0 0 / 88%)',
black80: 'rgba(0 0 0 / 80%)',
black72: 'rgba(0 0 0 / 72%)',
black64: 'rgba(0 0 0 / 64%)',
black56: 'rgba(0 0 0 / 56%)',
black48: 'rgba(0 0 0 / 48%)',
black40: 'rgba(0 0 0 / 40%)',
black32: 'rgba(0 0 0 / 32%)',
black24: 'rgba(0 0 0 / 24%)',
black16: 'rgba(0 0 0 / 16%)',
black8: 'rgba(0 0 0 / 8%)',
white100: 'rgba(255 255 255)',
white88: 'rgba(255 255 255 / 88%)',
white80: 'rgba(255 255 255 / 80%)',
white72: 'rgba(255 255 255 / 72%)',
white64: 'rgba(255 255 255 / 64%)',
white56: 'rgba(255 255 255 / 56%)',
white48: 'rgba(255 255 255 / 48%)',
white40: 'rgba(255 255 255 / 40%)',
white32: 'rgba(255 255 255 / 32%)',
white24: 'rgba(255 255 255 / 24%)',
white16: 'rgba(255 255 255 / 16%)',
white8: 'rgba(255 255 255 / 8%)',
},
spacingsType represents object or string (example:'l' or '10px' or 'l 10px')
spacings: {
z: '0',
xxs: '2px',
xs: '4px',
s: '8px',
m: '12px',
l: '16px',
xl: '24px',
xxl: '48px',
xxxl: '64px',
},
All props with CSS mark accept string which represents CSS property
example:
<BodyText widht='100px'>100px width text</BodyText>
Alert
An alert is a notification providing important information about the state of applications or devices, actions result and often triggers a communication request. It may contain a title, an optional message, and one or more parts.
Alerts may contain text. Its length varies depending on the device, fonts, margins and padding. If the text is too long, it can be split and shown in preview mode, where the first part will be split up with “…“ and the other part will be hidden.
type(type of the alert): 'info' | 'success' | 'error' | 'warning' - required
subType(subType of the alert): 'default' | 'withDescription' | 'simple' - required
margin?: spacingsType - css
padding?: spacingsType - css
width?: string (100%) - css
background?: colorsType (none) - css
color(text color)?: colorsType (depends on type) - css
title(title of the alert)?: string
onClick(onClick on cross)?: any
description(description of the alert)?: string
Info default
<Alert type="info" subType="default" title="title" />
Info with description
<Alert type="info" subType="withDescription" title="title" description="description" />
Info simple
<Alert type="info" subType="simple" title="title" />
Success default
<Alert type="success" subType="default" title="title" />
Success with description
<Alert type="success" subType="withDescription" title="title" description="description" />
Success simple
<Alert type="success" subType="simple" title="title" />
Error default
<Alert type="error" subType="default" title="title" />
Error with description
<Alert type="error" subType="withDescription" title="title" description="description" />
Error simple
<Alert type="error" subType="simple" title="title" />
Warning default
<Alert type="warning" subType="default" title="title" />
Warning with description
<Alert type="warning" subType="withDescription" title="title" description="description" />
Warning simple
<Alert type="warning" subType="simple" title="title" />
Avatar
Avatar - (also known as a profile picture or userpic) is a graphical representation of a user or the user's character or persona. Avatars show a thumbnail representation of an individual or company in the interface. This type of component occurs widely in material design and is used everywhere, from tables to dialogue menus.
You may choose a preferable option:
Six sizes: XXS, XS, S, M, L, XL. Sizes can be changed through the parameter “size.” Three types: icon, picture, letter; Two variants: circular and rounded square. To have rounded square change the parameter Circle to false.
size(size of the avatar): 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | string - required
type: 'icon' | 'picture' | 'letter' - required
border: 'circular' | 'rounded' | string - required
//css
background: colorsType - required
color: colorsType - required
margin?: spacingsType
width?: string
outlineOffset(css outline-offset property)?: string (-1px)
outline(css outline property)?: string ('1px solid')
height?: string
outlineColor?: colorsType
//handlers
onClick?: (e: MouseEvent<HTMLDivElement>) => void
onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void
onTouchStart?: (e: TouchEvent<HTMLDivElement>) => void
onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void
onMouseLeave?: (e: MouseEvent<HTMLDivElement>) => void
onTouchEnd?: (e: TouchEvent<HTMLDivElement>) => void
onMouseOver?: (e: MouseEvent<HTMLDivElement>) => void
onMouseOut?: (e: MouseEvent<HTMLDivElement>) => void
example:
A default image will be displayed with the image (the type should be a picture):
<Avatar
color="white100"
type="picture"
background="primary600"
size="m"
border="rounded"
>
<img style={{ height: '102%', width: '100%', objectFit: 'cover' }} src={avatar1} />
</Avatar>
<Avatar
color="white100"
type="picture"
background="primary600"
size="m"
border="circular"
>
<img style={{ height: '102%', width: '100%', objectFit: 'cover' }} src={avatar1} />
</Avatar>
Without an imgage the default avatar icon will be displayed (type should be icon):
<Avatar
key={item}
color="white100"
type="icon"
background="primary600"
size="m"
border="rounded"
/>
<Avatar
key={item}
color="white100"
type="icon"
background="primary600"
size="m"
border="circular"
/>
If you provide the text, the text will be displayed (type should be a letter):
<Avatar
color="white100"
type="letter"
background="primary600"
size="m"
border="rounded"
>
M
</Avatar>
<Avatar
color="white100"
type="letter"
background="primary600"
size="m"
border="circular"
>
M
</Avatar>
Box
This is the main component to build any other components
//hover properties
backgroundHover?: colorsType - background (css)
colorHover?: colorsType - color (css)
borderHover?: string - border (css)
//:before
beforeContent?: string - you can provide here any before content (css)
borderColor?: colorsType - border-color (css)
borderTopColor?: colorsType - border-top-color (css)
outlineColor?: colorsType - outline-color (css)
color?: colorsType - css
background?: colorsType - css
padding?: spacingsType - css
margin?: spacingsType - css
borderRadius?: cornersType - border-radius (css)
animation?: string - css
transition?: string - css
height?: string - css
minHeight?: string - min-height (css)
width?: string - css
minWidth?: string - min-width (css)
maxHeight?: string - min-height (css)
display?: string - css
backgroundImg?: string - background-img (css)
border?: string - css
outline?: string - css
borderBottom?: string - border-bottom (css)
borderRight?: string - border-right (css)
borderTop?: string - border-top (css)
cursor?: string - css
opacity?: string - css
top?: string - css
left?: string - css
right?: string - css
bottom?: string - css
pointEvents?: string - point-events (css)
shadow?: string - box-shadow (css)
userSelect?: string - user-select (css)
zIndex?: string - z-index (css)
maxWidth?: string - max-width (css)
backgroundPosition?: string - background-position (css)
gap?: string - css
outlineOffset?: string - outlineOffset (css)
position?: 'relative' | 'static' | 'absolute' | 'fixed' | 'sticky' | string - css
textAlign?: 'left' | 'right' | 'center' | string - text-align (css)
backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text' | string - background-clip (css)
directionFlex?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | string - direction-flex (css)
justifyContent?:
| 'center'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'left'
| 'right'
| 'space-between'
| 'space-around'
| 'stretch'
| string - justify-content (css)
alignItems?: 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | string - align-items (css)
alignSelf?: 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | string - align-self (css)
wrapFlex?: 'wrap' | 'nowrap' | 'wrap-reverse' | string - wrap-flex (css)
overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible' | string - overflow-y (css)
overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible' | string - overflow-x (css)
overflow?: 'scroll' | 'hidden' | 'auto' | 'visible' | string - css
boxSizing?: string - box-sizing (css)
example:
<Box alignItems="start" directionFlex="column" margin="0 10px 0 0"></Box>
Breadcrumbs
Breadcrumbs are the navigation chain on the site, which reflects the path to the current page. They’re important for usability and navigation: users always can see their current location on the website and get to the needed page by clicking items in the chain.
Breadcrumbs may be styled with a chevron or slash. The last breadcrumb keeps interactive.
This component generate breadcrumbs based on react-router-dom (automatically)
targetIndex?: number - index of name what you want customize string
breadcrumbName?: string - custom name of the index
isSlash?: boolean
example:
<Breadcrumbs targetIndex={2} breadcrumbName="customName" />
Collapse
Show titles and texts appropriately by toggling the visibility of content in your project with a few classes.
collapseArray: CollapseItemArrType[]
borderColor?: colorsType - css
chevronIconEnd?: boolean - display chevron on right side (default is left)
margin?: string - css
isChevron?: boolean - display or not chevron
padding?: string - css
collapseArray should be like that:
CollapseItemArrType = {
title(title of item): string
description(description of item): string
id: number
}
example:
const CollapseUi = () => {
const collapseObj = [
{
title: 'title1',
description: 'description1',
id: 1,
},
{
title: 'title2',
description: 'description2',
id: 2,
},
{
title: 'title3',
description: 'description3',
id: 3,
},
]
return (
<Box directionFlex="column" margin="10px 0">
<Collapse collapseArray={collapseObj} />
<Collapse borderColor="white100" collapseArray={collapseObj} />
</Box>
)
}
Buttons
Buttons are one of the essential components. It calls the user to make an action or choice with one tap. Buttons might be in different conditions and states, which is also important in communication between the user and the system.
You have base component ButtonBase.tsx. Every button extends from that component. That's why all those props are common:
styleType: 'xl' | 'l' | 'm' | 's' | string - required property
disabled?: boolean - disable button
//hover css
backgroundHover?: string - background (css)
shadowHover?: string - box-shadow (css)
colorHover?: string - color (css)
//active css
backgroundActive?: string - background (css)
//common css
margin?: spacingsType - (css)
borderRadius?: cornersType - border-radius(css)
color?: colorsType - (css)
width?: string - (css)
height?: string - (css)
position?: string - css
alignSelf?: string - align-self (css)
justifyContent?: string - justify-content (css)
fontWeight?: number - font-weight (css)
textTransform?: string - text-transform (css)
border?: string - css
background?: colorsType - css
borderColor?: colorsType - border-color (css)
right?: string - css
top?: string - css
whiteSpace?: string - white-space (css)
tabIndex?: string - tab-index (css)
fontSize?: string - font-size (css)
shadow?: string - box-shadow (css)
There are 5 types of buttons:
<PrimaryButton styleType='m'>Primary button</PrimaryButton>
<OutlineButton styleType='m'>Primary button</PrimaryButton>
<SecondaryButton styleType='m'>Primary button</PrimaryButton>
<TertiaryButton styleType='m'>Primary button</PrimaryButton>
default style object:
primaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...primaryButtonStyle,
},
ghostButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...ghostButton,
},
outlineButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...outlineButton,
},
secondaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...secondaryButton,
},
tertiaryButton: {
xl: 'padding: 0 23px; height: 56px;',
l: 'padding: 0 18px; height: 48px;',
m: 'padding: 0 16px; height: 40px;',
s: 'padding: 0 11px; height: 32px;',
...tertiaryButton,
},
Checkbox
A graphic UI element that allows the user to control a two-state option, enabled and disabled. When enabled, a checkmark is displayed inside the checkbox. Traditionally, the flag has a square shape.
label(checkbox text): string
isChecked(value from useState): boolean
setIsChecked(set from useState): Dispatch<SetStateAction<boolean>>
bgChecked?: string - provide color if you want to change checkbox background
example:
const CheckRadioToggle = () => {
const [value2, setValue2] = useState(false)
return (
<Checkbox label={'Checkbox'} isChecked={value2} setIsChecked={setValue2} />
)}
Dropdown
The dropdown allows the user to choose one of the existing options. It is usually used for navigation or forms. Depending on the location and property, it may be designed in different ways.
TheSprklDropDown has named constructors with predefined size parameters. Button size controls by text size and padding:
XL horizontal: 24, vertical: 16 L horizontal: 20, vertical: 12 M horizontal: 16, vertical: 8 S horizontal: 12, vertical: 6
Props:
type(type of dropdown button): 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline'
subtype(size of dropdown button): 'l' | 'm' | 's' | 'xs'
width?(the width of button and dropdown): string (auto)
margin?(button margin): string (0px)
disabled?(disable the dropdown): boolean (false)
onChange(setFunction from useState): (option: string) => void
activeValue(value from useState): number | string
top(if parent is relative, you can set the top position of the whole dropdown component)?: string (0px)
right(if parent is relative, you can set the top position of the whole dropdown component)?: string (0px)
position(set the position of whole dropdown component)?: string (relative)
optionList(array of values in the dropdown): string[] | number[]
example:
const CollapseUi = () => {
const [value, setValue] = useState('hello')
const collapseArray = ['hello', 'world', 'one', 'two']
const typeArr = ['primary', 'secondary', 'tertiary', 'ghost', 'outline']
const size = ['l', 'm', 's', 'xs']
return (
<Dropdown
subtype={size[0]}
width="300px"
type={item[0]}
activeValue={value}
optionList={collapseArray}
onChange={setValue}
/>
)
}
Radio
RadioGroup
Props:
name(name of radio inputs): string ('')
selectedValue(value from useState): string ('')
onClickRadioButton(action onClick on button): (value: string) => void
children(Radio components): ReactElement<PropsRadioType>[]
Radio
Props:
labelText(text to the left of the button)?: string ('')
value(input value)?: string ('')
onChange(internal function. Look RadioGroup. Do not provide any func)?: () => void
name(input name. Do not provide)?: string ('')
checked(input checked. Do not provide)?: boolean (false)
example:
const CheckRadioToggle = () => {
const [value3, setValue3] = useState('two')
return (
<RadioGroup
name="RadioGroup1"
selectedValue={value3}
onClickRadioButton={value => {
setValue3(value)
}}
>
<Radio value="one" labelText="one" />
<Radio value="two" labelText="two" />
</RadioGroup>
)
}
Input
inputType(size): 'l' | 'm' | 's'
margin?: spacingsType
width?: string (100%)
labelText(text on the top of input)?: string (not set)
helperText(text on the bottom of input)?: string (not set)
placeholder?: string (not set)
value?: string | number ('')
isError?: boolean (not set)
disabled?: boolean (false)
icon?: any
example
<Input width="500px" inputType="l" labelText="labelText" helperText="helperText" />
<Input width="500px" inputType="l" labelText="labelText" helperText="helperText" isError={true}/>
List
type: 'ordered' | 'unordered' | 'custom'
children: JSX.Element[]
margin?: string
<List type="ordered">
<BodyText type="m">
Text
</BodyText>
<BodyText type="m">
Text
</BodyText>
</List>
Stepper
type(type of Stepper): 'horizontal' | 'vertical'
isTextType(text type Stepper)?: boolean (false)
isNumeric(numeric type Stepper)?: boolean (false)
stepLength(cont of steps): number
activeIndex(value from useState): number
height(height of wrapper box)?: string (300px)
width(height of wrapper box)?: string (100%)
onClick(action onClick on step): (currentStep: any) => void
stepName(array of names of the steps)?: string[]
const StepperUi = () => {
const [step, setStep] = useState(0)
const stepName = ['one', 'two', 'three', 'four']
const func = currentStep => setStep(currentStep)
return (
<>
<Box>
<Stepper stepName={stepName} type="vertical" stepLength={4} activeIndex={step} onClick={func} isNumeric />
<Stepper stepName={stepName} type="vertical" stepLength={4} activeIndex={step} onClick={func} />
<Stepper type="vertical" stepName={stepName} isTextType stepLength={4} activeIndex={step} onClick={func} />
</Box>
<Stepper type="horizontal" stepLength={4} activeIndex={step} onClick={func} isNumeric />
<Stepper type="horizontal" stepLength={4} activeIndex={step} onClick={func} />
<Stepper type="horizontal" stepName={stepName} isTextType stepLength={4} activeIndex={step} onClick={func} />
</>
)
}
Vertical numeric
<Stepper stepName={stepName} type="vertical" stepLength={4} activeIndex={step} onClick={func} isNumeric />
Vertical circular
<Stepper stepName={stepName} type="vertical" stepLength={4} activeIndex={step} onClick={func} />
Vertical text
<Stepper type="vertical" stepName={stepName} isTextType stepLength={4} activeIndex={step} onClick={func} />
Horizontal numeric
<Stepper type="horizontal" stepLength={4} activeIndex={step} onClick={func} isNumeric />
Horizontal circular
<Stepper type="horizontal" stepLength={4} activeIndex={step} onClick={func} />
Horizontal text
<Stepper type="horizontal" stepName={stepName} isTextType stepLength={4} activeIndex={step} onClick={func} />
Tabs
type(type of tab): 'horizontal' | 'vertical'
activeIndex: number
height(height of wrapper box)?: string (not set)
width(height of wrapper box)?: string (100%)
onClick(action onClick on step): (currentStep: any) => void
namesArr(array of tab names): JSX.Element[]
activeColor?(active tab color text): string
const TabsUi = () => {
const [step, setStep] = useState(0)
const stepName = [
<LabelText key="one" color="current" type="m">
one
</LabelText>,
<LabelText key="two" color="current" type="m">
two
</LabelText>,
<LabelText key="three" color="current" type="m">
three
</LabelText>,
<LabelText key="four" color="current" type="m">
four
</LabelText>,
]
const func = currentStep => setStep(currentStep)
return (
<>
<Tabs width="800px" type="horizontal" activeIndex={step} onClick={func} namesArr={stepName} />
<Tabs width="200px" type="vertical" activeIndex={step} onClick={func} namesArr={stepName} />
</>
)
}
Horizontal
<Tabs width="800px" type="horizontal" activeIndex={step} onClick={func} namesArr={stepName} />
Vertical
<Tabs width="200px" type="vertical" activeIndex={step} onClick={func} namesArr={stepName} />
Tag
children: string
type: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' | 'default'
size: 's' | 'm' | 'l'
margin?: string
backgroundColor?: string
const TagsUi = () => {
const type = ['primary', 'secondary', 'tertiary', 'ghost', 'outline', 'default'] as any
const size = ['s', 'm', 'l'] as any
return (
<Box padding="10px" background="neutrals600" alignItems="center">
{type.map(item => (
<Fragment key={item}>
{size.map(sizeItem => (
<Tags type={item} key={sizeItem} size={sizeItem} margin="5px">
{item + ' ' + sizeItem}
</Tags>
))}
</Fragment>
))}
</Box>
)
}
Toggle
name: string
checked: string | boolean
disabled?: boolean
mobile?: boolean - mobile version
onChange?: () => void
const CheckRadioToggle = () => {
const [value1, setValue1] = useState(false)
return (
<Toggle name="Toggle" checked={value1} onChange={() => setValue1(p => !p)} />
)
}
Tooltip
type: 'top' | 'right' | 'left' | 'bottom'
width?: string
children: string
topPos?: string
botPos?: string
const TooltipUi = () => {
const typeArr = [
{ type: 'top', botPos: '-155px' },
{ type: 'right' },
{ type: 'left' },
{ type: 'bottom', topPos: '-176px' },
] as any[]
return (
<Box margin="10px 0" alignItems="center" justifyContent="center" width="100%">
<Box padding="5px" position="relative" width="300px" height="300px" background="red">
{typeArr.map(({ type, topPos, botPos }) => (
<Tooltip botPos={botPos} topPos={topPos} key={type} type={type}>
{`Hello. How are you? I hope you are good ${type}`}
</Tooltip>
))}
</Box>
</Box>
)
}
Typography
You have base component TextBase.tsx. Every text extends from that component. That's why all those props are common:
color?: colorsType - css
margin?: spacingsType - css
width?: string - css
minWidth?: string - min-width (css)
alignSelf?: string - alignSelf (css)
maxWidth?: string - max-width (css)
whiteSpace?: string - white-space (css)
position?: string - css
right?: string - css
left?: string - css
bottom?: string - css
top?: string - css
textOverflow?: string - text-overflow (css)
fontSize?: string - font-size (css)
textAlign?: 'left' | 'right' | 'center' | string - text-align (css)
overflow?: 'scroll' | 'hidden' | 'auto' | 'visible' | string - css
There are 4 types of text:
<BodyText type='m'>Body Text</BodyText>
<HeadlineText type='m'>Headline Text</HeadlineText>
<LabelText type='m'>Label Text</LabelText>
<SupportText type='m'>Support Text</SupportText>
default style object:
bodyText: {
l: 'font-size: 1.25rem; line-height: 1.2;',
m: 'font-size: 1rem;',
s: 'font-size: 0.875rem; letter-spacing: 0rem;',
...bodyTextStyles,
},
headlineText: {
l: 'font-size: 3.5rem; letter-spacing: -0.125rem; line-height: 1.1;',
xl: 'font-size: 3rem; letter-spacing: -0.08125rem; line-height: 1.1;',
m: 'font-size: 2rem; letter-spacing: -0.05rem;',
s: 'font-size: 1.75rem; letter-spacing: -0.025rem;',
xs: 'font-size: 1.5rem; letter-spacing: -0.015rem;',
xxs: 'font-size: 1.25rem; letter-spacing: -0.015rem;',
...headlineTextStyles,
},
labelText: { m: 'font-size: 1rem;', s: 'font-size: 0.875rem;', ...labelTextStyle },
supportText: {
quote:
'font-family: IBM Plex Sans; font-style: normal; font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.24px;',
overline:
'font-family: IBM Plex Sans; font-style: normal; font-weight: 700; font-size: 14px; line-height: 16px; text-transform: uppercase',
caption:
'font-family: Inter; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: -0.24px',
...supportTextStyle,
},