@tidharp/cem-ui
v0.1.3
Published
Checkpoint Exposure Management UI components
Maintainers
tidharpReadme
@tidharp/cem-ui
Checkpoint Exposure Management UI components — a shared React component library for the Exposure Management team.
Installation
npm install @tidharp/cem-uiPeer Dependencies
You must also install the following peer dependencies in your project:
npm install react react-dom styled-componentsOptional Dependencies
These are only needed if you use AG Grid or date/string utility features:
# For AG Grid components (AgGridTableContainer, TableUtils, AgGridOverlays)
npm install ag-grid-enterprise ag-grid-react
# For date utilities
npm install date-fns
# For string utilities
npm install lodash-esUsage
import '@tidharp/cem-ui/styles.css';
import { ThemeProvider, CyFlexRow, Button, CyTextH1 } from '@tidharp/cem-ui';
const App = () => (
<ThemeProvider>
<CyFlexRow align="center" gap="1rem">
<CyTextH1>Hello, Exposure Management!</CyTextH1>
<Button variant="primary">Get Started</Button>
</CyFlexRow>
</ThemeProvider>
);That single CSS import is all you need — no additional Tailwind configuration required.
Styling
This library uses both styled-components and Tailwind CSS v4, and ships pre-compiled CSS with everything included.
Design Tokens
All colors are driven by CSS custom properties (design tokens). The library ships sensible defaults that work out of the box. The token system has two layers:
Brand palette — the full color scale for each hue:
--gray-00 … --gray-10
--primary-00 … --primary-10 (+ --primary-005)
--red-01 … --red-10
--green-01 … --green-10
--yellow-01 … --yellow-10
--orange-01 … --orange-10
--geekblue-01 … --geekblue-10
--gold-01 … --gold-10Semantic tokens — component-level roles that reference the palette:
--background --foreground
--card --card-foreground
--popover --popover-foreground
--primary --primary-foreground
--secondary --secondary-foreground
--muted --muted-foreground
--accent --accent-foreground
--destructive --destructive-foreground
--border --input --ring
--sidebar --sidebar-foreground --sidebar-accent --sidebar-accent-foreground
--success --error
--chart-primary --chart-primary-lightCustomising Colors
Replace an entire palette scale — set the brand variables in your app's CSS:
/* app.css */
:root {
--primary-07: #7c3aed; /* your brand primary */
--primary-06: #6d28d9;
/* … other shades */
}Override a semantic token only — great for small tweaks:
:root {
--background: #fafafa;
--ring: var(--primary-06);
}Dark mode — the library toggles a .dark class on <html> via ThemeProvider. Override dark-mode tokens the same way:
.dark {
--background: #0f0f0f;
--primary: var(--primary-04);
}Because the library uses @theme inline, all token overrides are picked up by both Tailwind utilities (bg-primary-07, text-gray-09, …) and styled-components (theme.colors.primary07, …) at runtime without any rebuild.
Using Tokens in Your Own Tailwind CSS
The @theme inline block is already compiled into dist/styles.css, so after importing the library CSS all the color utilities are available in your own classnames too:
// These just work — no extra config needed
<div className="bg-primary-07 text-gray-00">...</div>
<div className="border-gray-03 hover:bg-accent">...</div>Using Tokens in Styled-Components
The ThemeProvider exposes all tokens via the styled-components theme object:
import styled from 'styled-components';
const MyBox = styled.div`
background: ${({ theme }) => theme.colors.primary07};
color: ${({ theme }) => theme.colors.gray00};
`;What's Included
UI Components (shadcn-style)
Accordion, AlertDialog, Alert, Avatar, Badge, Breadcrumb, Button, Card, Chart, Checkbox, ChipsInput, Command, Dialog, DropdownMenu, Form, Input, Label, Loader, Menubar, Pagination, Popover, RadioGroup, Select, Separator, Sheet, Sidebar, Skeleton, Stepper, Switch, Table, Tabs, Textarea, Toast, Toaster, ToggleGroup, Toggle, Tooltip
Layout Components
CyText,CyFlexRow,CyFlexColumn— core layout primitivesCyTextBase,CyTextH1–CyTextH5,CyTextSmall,CyTextLarge— typographyVerticalDivider,BaseLists— structural elementsAgGridOverlays— loading, error, and empty state overlays for AG Grid- Sidebar primitives —
SingleSidebarItem,SingleSidebarSeparator,SidebarStyling
Utilities
pxToRem,cn— styling utilitiesformatDate,formatDateDistance,formatDuration— date formattingformatNumber,formatAsPercentage— number formattingkebabToTitleCase,toPascalCase,toKebabCase— string formattingTableUtils— AG Grid cell renderers and configuration helpers- Color utilities —
hexToHSL,hslToHex,resolveColor,generateColorVariations
Theme System
Wrap your app with <ThemeProvider> to enable light/dark theming:
import { ThemeProvider, useTheme } from '@tidharp/cem-ui';
const MyComponent = () => {
const { theme, toggleTheme, isDarkTheme } = useTheme();
return <button onClick={toggleTheme}>{isDarkTheme ? 'Light' : 'Dark'}</button>;
};AG Grid Integration
For AG Grid components, provide your license key via the AgGridConfigProvider:
import { AgGridConfigProvider, AgGridTableContainer } from '@tidharp/cem-ui';
const App = () => (
<AgGridConfigProvider licenseKey="YOUR_AG_GRID_LICENSE_KEY">
<AgGridTableContainer>
{/* Your AG Grid component */}
</AgGridTableContainer>
</AgGridConfigProvider>
);Advanced: Using with a Tailwind CSS build pipeline
The library ships pre-compiled CSS, so you do not need @source in most setups. Importing @tidharp/cem-ui/styles.css as a JS side-effect import is sufficient for Vite, Next.js, and similar bundlers.
If you are running a standalone Tailwind CLI build (no bundler) and want a single CSS output that includes both the library and your own app styles, add this to your CSS entry:
/* app.css */
@import "tailwindcss";
@source "../node_modules/@tidharp/cem-ui/dist/index.js";This tells Tailwind to scan the library bundle so it generates all utility classes used by the library components.
License
MIT