The Markprompt components are headless, and can be styled using CSS variables or Tailwind utility classes.
Default styles
To get started with a set of default styles, add the @markprompt/css package to your project:
1npm install @markprompt/css
Once installed, import the styles in the same place as the component code:
1import '@markprompt/css';
2
3// Component code...
Alternatively, you can import the CSS directly in your HTML from a CDN:
1<link rel="stylesheet" href="https://esm.sh/@markprompt/css?css" />
CSS variables
You can customize your design further by modifying the following CSS variables:
1:root {
2 --markprompt-background: #fff;
3 --markprompt-foreground: #171717;
4 --markprompt-muted: #fafafa;
5 --markprompt-mutedForeground: #888;
6 --markprompt-border: #e5e5e5;
7 --markprompt-border-accent: #cdcdcd;
8 --markprompt-input: #fff;
9 --markprompt-primary: #6366f1;
10 --markprompt-primaryForeground: #fff;
11 --markprompt-primaryMuted: #8285f4;
12 --markprompt-secondary: #fafafa;
13 --markprompt-secondaryForeground: #171717;
14 --markprompt-primaryHighlight: #ec4899;
15 --markprompt-secondaryHighlight: #a855f7;
16 --markprompt-overlay: #00000010;
17 --markprompt-ring: #b4b6f8;
18 --markprompt-radius: 0.75rem;
19 --markprompt-button-radius: 0.375rem;
20 --markprompt-text-size: 0.875rem;
21 --markprompt-text-size-xs: 0.75rem;
22 --markprompt-text-size-code: 88%;
23 --markprompt-button-icon-size: 1rem;
24 --markprompt-icon-stroke-width: 2px;
25 --markprompt-shadow: 0 1px 2px 0 #0000000d;
26 --markprompt-ring-shadow: 0 0 #0000;
27 --markprompt-ring-offset-shadow: 0 0 #0000;
28 --markprompt-error-background: #fef2f2;
29 --markprompt-error-foreground: #991b1b;
30}
31
32@media (prefers-color-scheme: dark) {
33 :not([data-theme='light']):root {
34 --markprompt-background: #050505;
35 --markprompt-foreground: #d4d4d4;
36 --markprompt-muted: #171717;
37 --markprompt-mutedForeground: #808080;
38 --markprompt-border: #262626;
39 --markprompt-border-accent: #444;
40 --markprompt-input: #fff;
41 --markprompt-primary: #6366f1;
42 --markprompt-primaryForeground: #fff;
43 --markprompt-primaryMuted: #8285f4;
44 --markprompt-secondary: #0e0e0e;
45 --markprompt-secondaryForeground: #fff;
46 --markprompt-primaryHighlight: #ec4899;
47 --markprompt-secondaryHighlight: #a855f7;
48 --markprompt-overlay: #00000040;
49 --markprompt-ring: #b4b6f8;
50 --markprompt-error-background: #450a0a;
51 --markprompt-error-foreground: #fecaca;
52 }
53}
Styling components
Each component has a class name that can be used for custom styling. For instance, the avatar component has class name MarkpromptMessageAvatar, and can be customized by setting the style as follows:
1/* Your custom styling of the avatar component */
2.MarkpromptMessageAvatar {
3 color: white;
4 width: 16px;
5 height: 16px;
6 flex: none;
7 overflow: hidden;
8}
Check out the Markprompt default styles for a full example.