Your team
Invite and manage who can see this project.
- John Doejohn.doe@acme.dev
Owner - Jane Smithjane.smith@acme.dev
Editor - Alex Leealex.lee@acme.dev
Viewer
v0.0.519 components on npm
Interfaces, carefully assembled.
The CodeChem design system as accessible, themeable web components. Use them in React, Vue, Angular or plain HTML with a single import.
Open roles
Positions the hiring team is working on.
- Senior Front-End EngineerSkopje · Hybrid
Open - Product DesignerRemote · Europe
Interviewing - QA EngineerSkopje · On site
Paused
Book a design review
30 minutes with the design system team.
Recent activity
This month
Billable work across all projects.
- Hours logged
- 1,284
+12% - Utilisation
- 86%
−3%
Notifications
Choose what you hear about.
- MentionsWhen someone tags you in a comment.
- Weekly digestA Monday summary of your projects.
- Product updatesNew components and releases.
New project
Set it up now, invite people later.
Team size
Works wherever HTML works.
Standard custom elements built with Lit. No framework wrapper to install, no build plugin to configure.
- One import. Load everything, or one component at a time to keep bundles small.
- Encapsulated styles. Shadow DOM keeps your CSS and ours from colliding.
- Native events. Listen for
changeandinputlike on any form control. - Editor support. Types and VS Code autocomplete ship with the package.
<!-- main.js: import '@codechem/components'; -->
<cc-text-input label="Work email"></cc-text-input>
<cc-switch checked>Email notifications</cc-switch>
<cc-button>Save changes</cc-button>import '@codechem/components';
export function Settings() {
return (
<form>
<cc-switch checked>Email notifications</cc-switch>
<cc-button onClick={save}>Save changes</cc-button>
</form>
);
}<!-- vite.config: isCustomElement: (tag) => tag.startsWith('cc-') -->
<template>
<cc-switch :checked="alerts" @change="alerts = $event.target.checked">
Email notifications
</cc-switch>
<cc-button @click="save">Save changes</cc-button>
</template>@Component({
selector: 'app-settings',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<cc-switch checked>Email notifications</cc-switch>
<cc-button (click)="save()">Save changes</cc-button>
`,
})
export class SettingsComponent {}Your brand is one variable away.
Every colour, radius and surface comes from --cc-* custom properties. Override them on :root. No !important, no rebuild.
Accent
Tokens, without the components.
@codechem/tokens is the same Figma palette, type scale, spacing and radius as plain CSS custom properties. The components load it for you; install it on its own to style anything else.
- One stylesheet. Import
tokens.cssand every--cc-*variable is on:root. - Semantic first. Surface, text, border and accent tokens switch with the theme. The raw palette is there when you need it.
- Layered. The constructable sheet sits in
@layer cc-tokens, so your overrides win.
/* main.js: import '@codechem/tokens/tokens.css'; */
.card {
background: var(--cc-surface-surface-1);
color: var(--cc-text-high-emphasis);
padding: var(--cc-padding-padding-3);
border: 1px solid var(--cc-border-medium-contrast);
border-radius: var(--cc-radius);
font-family: var(--cc-typeface-typeface);
}