@cognite/cogs.js-v2
Advanced tools
A comprehensive React component library for AI-generated applications with Cognite branding
A comprehensive React component library built with TypeScript and Tailwind CSS, designed specifically for AI-generated applications that maintain consistent Cognite branding.
This design system enables AI to easily generate applications with consistent look and feel based on Cognite branding. It provides a complete set of pre-built components that can be used to rapidly create professional applications.
npm install @cognite/design-system
Make sure you have the required peer dependencies installed:
npm install react react-dom
This design system requires Tailwind CSS to be configured in your project. Add the design system's styles to your Tailwind configuration:
// tailwind.config.js
module.exports = {
content: [
// ... your existing content paths
"./node_modules/@cognite/design-system/dist/**/*.{js,ts,jsx,tsx}",
],
// ... rest of your config
}
Import the styles in your main CSS file:
@import '@cognite/design-system/styles';
import { Button, Card, Input } from '@cognite/cogs.js-v2';
function App() {
return (
<Card>
<Input label="Email" type="email" />
<Button variant="primary">Submit</Button>
</Card>
);
}
This package includes a comprehensive AI usage guide to help AI systems generate consistent applications:
As a file:
# After installation, the guide is available at:
node_modules/@cognite/cogs.js-v2/dist/AI_USAGE_GUIDE.md
Direct import:
// Import the guide file directly
import guideContent from '@cognite/cogs.js-v2/ai-guide';
The design system uses Cognite's color palette:
When using this design system for AI-generated applications:
// ✅ Good - Use semantic components
<Card>
<CardHeader title="User Profile" />
<CardContent>
<Avatar name="John Doe" />
<Text>Software Engineer</Text>
</CardContent>
</Card>
// ❌ Avoid - Don't create custom styled divs
<div className="bg-white p-4 rounded shadow">
<div className="font-bold">User Profile</div>
<div className="w-10 h-10 rounded-full bg-gray-300"></div>
</div>
// ✅ Form layouts
<VStack gap="md">
<Input label="Email" required />
<Input label="Password" type="password" required />
<Button variant="primary" fullWidth>Sign In</Button>
</VStack>
// ✅ Data display
<StatsGroup
columns={3}
stats={[
{ label: "Total Users", value: "1,234", change: { value: "+12%", type: "increase" } },
{ label: "Revenue", value: "$45,678", change: { value: "+8%", type: "increase" } },
{ label: "Conversion", value: "3.2%", change: { value: "-2%", type: "decrease" } }
]}
/>
// ✅ Use responsive props
<Grid
cols={1}
responsive={{ md: 2, lg: 3 }}
gap="md"
>
<Card>Content 1</Card>
<Card>Content 2</Card>
<Card>Content 3</Card>
</Grid>
// ✅ Include proper labels and ARIA attributes
<Modal
isOpen={isOpen}
onClose={onClose}
title="Confirm Action"
description="This action cannot be undone"
>
<Text>Are you sure you want to delete this item?</Text>
<ModalFooter>
<Button variant="outline" onClick={onClose}>Cancel</Button>
<Button variant="destructive" onClick={onConfirm}>Delete</Button>
</ModalFooter>
</Modal>
<Container maxWidth="7xl">
<VStack gap="lg">
<Navbar>
<NavbarBrand title="Cognite App" />
<NavbarMenu>
<NavbarItem href="/dashboard" active>Dashboard</NavbarItem>
<NavbarItem href="/analytics">Analytics</NavbarItem>
</NavbarMenu>
</Navbar>
<HStack gap="lg" align="start">
<Sidebar width="md">
<SidebarSection title="Main">
<SidebarItem icon={<DashboardIcon />} active>Dashboard</SidebarItem>
<SidebarItem icon={<UsersIcon />}>Users</SidebarItem>
</SidebarSection>
</Sidebar>
<VStack gap="md" className="flex-1">
<StatsGroup columns={4} variant="cards" stats={stats} />
<Grid cols={2} gap="md">
<Card>
<CardHeader title="Recent Activity" />
<CardContent>
<List>
{activities.map(activity => (
<ListItem key={activity.id} {...activity} />
))}
</List>
</CardContent>
</Card>
<Card>
<CardHeader title="Performance" />
<CardContent>
<KPICard
title="Monthly Growth"
value="24.5%"
progress={75}
trend={{ value: "+5.2%", type: "up", period: "vs last month" }}
status="success"
/>
</CardContent>
</Card>
</Grid>
</VStack>
</HStack>
</VStack>
</Container>
<Card maxWidth="md">
<CardHeader title="Create Account" description="Fill in your details below" />
<CardContent>
<VStack gap="md">
<HStack gap="md">
<Input label="First Name" required />
<Input label="Last Name" required />
</HStack>
<Input label="Email" type="email" required />
<Input label="Password" type="password" required />
<CheckboxGroup label="Preferences">
<Checkbox label="Email notifications" />
<Checkbox label="SMS notifications" />
</CheckboxGroup>
<Button variant="primary" fullWidth>Create Account</Button>
</VStack>
</CardContent>
</Card>
<Card>
<CardHeader title="Users" action={<Button>Add User</Button>} />
<CardContent>
<Table
columns={[
{ key: 'name', title: 'Name', dataIndex: 'name' },
{ key: 'email', title: 'Email', dataIndex: 'email' },
{ key: 'role', title: 'Role', dataIndex: 'role',
render: (role) => <Badge variant="primary">{role}</Badge> },
{ key: 'status', title: 'Status', dataIndex: 'status',
render: (status) => <Badge variant={status === 'active' ? 'success' : 'error'}>{status}</Badge> }
]}
data={users}
rowSelection={{
selectedRowKeys,
onChange: setSelectedRowKeys
}}
/>
</CardContent>
</Card>
The design system uses CSS custom properties for theming. Colors can be customized by updating the CSS variables:
:root {
--ds-color-sapphire-500: #your-primary-color;
--ds-color-emerald-500: #your-success-color;
/* ... other color overrides */
}
All components are fully typed with TypeScript interfaces. Import types as needed:
import { ButtonProps, CardProps, InputProps } from '@cognite/design-system';
# Build for production
npm run build
# Build and watch for changes
npm run build:lib -- --watch
# Build and publish to npm
npm run prepublishOnly
npm publish --access public
MIT License - see LICENSE file for details.
This design system provides everything needed to create consistent, professional applications that align with Cognite's brand guidelines while being optimized for AI-driven development workflows.
FAQs
A comprehensive React component library for AI-generated applications with Cognite branding
We found that @cognite/cogs.js-v2 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 261 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.