1.0.15 • Published 7 months ago
@razorrisk/shared-ui v1.0.15
@razorrisk/shared-ui
A collection of shared, themed UI components for RazorRisk applications.
Prerequisites
To use components from @razorrisk/shared-ui, you must wrap your application (or component tree) in a ThemeProvider and pass a valid theme object. This ensures consistent design tokens such as typography, spacing, and colors.
Before installing @razorrisk/shared-ui, ensure your project has the following peer dependencies installed. These libraries are required for compatibility and proper functionality:
| Package | Required Version |
|---|---|
react | ^18.3.1 |
react-dom | ^18.3.1 |
styled-components | 5.3.11 |
You can install them using the following command:
npm install react@^18.3.1 react-dom@^18.3.1 styled-components@5.3.11Installation
Install the package via npm or yarn:
npm install @razorrisk/shared-uiUsage
const theme = {
"name": "light",
"typography": {
"fontFamily": "Inter",
"lineHeights": {
"0": "1rem",
"1": "1.25rem",
"2": "1.5rem",
"3": "1.875rem",
"4": "2rem",
"5": "2.125rem",
"6": "2.625rem",
"7": "3.25rem",
"8": "4.5rem",
"9": "5.375rem",
"10": "6.75rem",
"11": "9rem",
"12": "12rem"
},
"fontWeights": {"0": 100, "1": 200, "2": 300, "3": 400, "4": 500, "5": 600, "6": 700, "7": 800, "8": 900},
"fontSizes": {
"0": "0.75rem",
"1": "0.875rem",
"2": "1rem",
"3": "1.125rem",
"4": "1.25rem",
"5": "1.5rem",
"6": "1.875rem",
"7": "2.25rem",
"8": "3rem",
"9": "3.75rem",
"10": "4.5rem",
"11": "6rem",
"12": "8rem"
}
},
"colors": {
"base": {
"0": "#FFFFFF",
"50": "rgba(26, 26, 26, 0.05)",
"100": "rgba(26, 26, 26, 0.1)",
"200": "rgba(26, 26, 26, 0.2)",
"300": "rgba(26, 26, 26, 0.3)",
"400": "rgba(26, 26, 26, 0.4)",
"500": "rgba(26, 26, 26, 0.5)",
"600": "rgba(26, 26, 26, 0.6)",
"700": "rgba(26, 26, 26, 0.7)",
"800": "rgba(26, 26, 26, 0.8)",
"900": "rgba(26, 26, 26, 1)"
},
"blue": {
"50": "#f2f7ff",
"100": "#dcebfe",
"200": "#bedbfe",
"300": "#91c3fd",
"400": "#61a6fa",
"500": "#3479e9",
"600": "#2463eb",
"700": "#1d4fd7",
"800": "#1e3fae",
"900": "#1e3b8a"
},
"purple": {
"50": "#faf5ff",
"100": "#f2e5ff",
"200": "#ead6ff",
"300": "#d8b4fe",
"400": "#bf83fc",
"500": "#a855f7",
"600": "#9234ea",
"700": "#7e22ce",
"800": "#6a21a6",
"900": "#591c87"
},
"gray": {
"50": "#fdfdfd",
"100": "#f4f4f5",
"200": "#e4e4e7",
"300": "#d4d4d8",
"400": "#a1a1aa",
"500": "#71717a",
"600": "#52525b",
"700": "#3f3f46",
"800": "#27272a",
"900": "#18181b"
},
"green": {
"50": "#f2fdf5",
"100": "#defce9",
"200": "#bbf7d0",
"300": "#85efac",
"400": "#4ade80",
"500": "#1ac057",
"600": "#16a249",
"700": "#157f3c",
"800": "#1c713c",
"900": "#114c29"
},
"red": {
"50": "#fef1f1",
"100": "#fee1e1",
"200": "#fec8c8",
"300": "#fca6a6",
"400": "#fd6b6b",
"500": "#ef4343",
"600": "#dc2828",
"700": "#ba1c1c",
"800": "#981b1b",
"900": "#811d1d"
},
"yellow": {
"50": "#fefce7",
"100": "#fef9c3",
"200": "#fef08b",
"300": "#fddf49",
"400": "#facc14",
"500": "#e7b008",
"600": "#c88a04",
"700": "#a26107",
"800": "#864e0e",
"900": "#733f12"
},
"blueGray": {
"50": "#f8fafc",
"100": "#f1f5f9",
"200": "#e1e7ef",
"300": "#cbd5e1",
"400": "#94a3b8",
"500": "#65758b",
"600": "#48566a",
"700": "#344256",
"800": "#1d283a",
"900": "#0f1729"
},
"bronze": {
"50": "#fafaf9",
"100": "#f5f5f4",
"200": "#e7e5e4",
"300": "#d6d3d1",
"400": "#a8a29f",
"500": "#78726d",
"600": "#56524e",
"700": "#44403c",
"800": "#292524",
"900": "#1c1917"
},
"cyan": {
"50": "#ebfeff",
"100": "#cdfafe",
"200": "#a6f3fc",
"300": "#67e8f9",
"400": "#20d3ee",
"500": "#07b6d5",
"600": "#088eaf",
"700": "#0e7490",
"800": "#155f75",
"900": "#164f64"
},
"emerald": {
"50": "#edfdf5",
"100": "#d1fae5",
"200": "#a5f3cf",
"300": "#6ee7b7",
"400": "#36d399",
"500": "#10b77f",
"600": "#059467",
"700": "#047656",
"800": "#066046",
"900": "#064b39"
},
"fuchsia": {
"50": "#fdf5ff",
"100": "#f9e5ff",
"200": "#f5d2fe",
"300": "#f0abfc",
"400": "#e87bf9",
"500": "#d948ef",
"600": "#bf27d3",
"700": "#a31daf",
"800": "#85198f",
"900": "#711a75"
},
"indigo": {
"50": "#f0f3ff",
"100": "#e0e8ff",
"200": "#c8d3fe",
"300": "#a6b4fc",
"400": "#828df8",
"500": "#6467f2",
"600": "#5048e5",
"700": "#463acb",
"800": "#372fa2",
"900": "#312e7f"
},
"skyBlue": {
"50": "#f0f9ff",
"100": "#e1f3fe",
"200": "#bae5fd",
"300": "#7ed4fc",
"400": "#3abff8",
"500": "#0da2e7",
"600": "#0284c5",
"700": "#0369a0",
"800": "#075783",
"900": "#0c4a6e"
},
"lime": {
"50": "#f7fee7",
"100": "#ebfcca",
"200": "#d9f99f",
"300": "#bef263",
"400": "#a1e633",
"500": "#82cb15",
"600": "#66a50d",
"700": "#4c7b0f",
"800": "#406312",
"900": "#355214"
},
"metal": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5db",
"400": "#9ca3b0",
"500": "#6b7280",
"600": "#4b5563",
"700": "#384252",
"800": "#1f2937",
"900": "#111827"
},
"orange": {
"50": "#fff6eb",
"100": "#FFEDD6",
"200": "#FED6A9",
"300": "#FDBA72",
"400": "#fb923c",
"500": "#F67416",
"600": "#E9590C",
"700": "#C03F0C",
"800": "#9B3B12",
"900": "#7D2D12"
},
"pink": {
"50": "#fdf2f8",
"100": "#fce8f4",
"200": "#fbd0e8",
"300": "#f9a9d5",
"400": "#f471b5",
"500": "#ec4699",
"600": "#db2979",
"700": "#bf185d",
"800": "#9b174c",
"900": "#811842"
},
"rose": {
"50": "#fff0f1",
"100": "#ffe5e7",
"200": "#fecdd3",
"300": "#fda5af",
"400": "#fb6f84",
"500": "#f43e5c",
"600": "#e21d48",
"700": "#bf123d",
"800": "#a1123a",
"900": "#861336"
},
"teal": {
"50": "#f2fdfa",
"100": "#cbfbf0",
"200": "#98f6e3",
"300": "#5dead5",
"400": "#2bd4bd",
"500": "#14b8a5",
"600": "#0d968b",
"700": "#0f756d",
"800": "#115f5a",
"900": "#134e4a"
},
"violet": {
"50": "#f6f5ff",
"100": "#ebe7fe",
"200": "#ded7fe",
"300": "#c3b4fd",
"400": "#a689fa",
"500": "#895af6",
"600": "#7c3bed",
"700": "#6b26d9",
"800": "#5a21b5",
"900": "#4d1d95"
}
},
"spacing": {
"0": "0rem",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"11": "2.75rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"28": "7rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"96": "24rem",
"0.5": "0.125rem",
"1.5": "0.375rem",
"2.5": "0.625rem",
"3.5": "0.875rem",
"4.5": "1.125rem"
},
"iconSizes": {"0": "0.8333125rem", "1": "1.041875rem", "2": "1.125rem", "3": "1.25rem"},
"radius": {
"0": "0.125rem",
"1": "0.25rem",
"2": "0.375rem",
"3": "0.5rem",
"4": "0.625rem",
"5": "0.75rem",
"9999": "624.9375rem"
}
}import { ThemeProvider, Badge } from '@razorrisk/shared-ui';
const App = () => (
<ThemeProvider theme={theme}>
<Badge>Test Badge</Badge>
</ThemeProvider>
);
export default App;