thread-ui 0.1.10 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -53
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,68 +1,30 @@
|
|
|
1
1
|
# Thread UI
|
|
2
2
|
|
|
3
|
-
Thread is a UI Library I created for use in my personal website.
|
|
3
|
+
Thread is a UI Library I created for use in my [personal website](http://fisherandrew.org).
|
|
4
4
|
|
|
5
5
|
# Get Started
|
|
6
6
|
|
|
7
7
|
All components work out of the box. Documentation coming soon to thread.fisherandrew.org
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
Thread-UI supports custom themes created by the user that override the default theme, even when using SSR in Next.js. To implement a custom theme, first create a config file in the root of the project named `thread.config.ts`. Define the Theme attributes you'd like to override, initilize it using using the thread-ui `createTheme` function, and export your theme.
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
import { createTheme } from 'thread-ui';
|
|
15
|
-
|
|
16
|
-
const threadConfig = {
|
|
17
|
-
colors: {
|
|
18
|
-
primary: {
|
|
19
|
-
light: '#4f46e5',
|
|
20
|
-
main: '#4338ca',
|
|
21
|
-
dark: '#3730a3',
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
} as const;
|
|
9
|
+
# Features
|
|
25
10
|
|
|
26
|
-
|
|
27
|
-
export const ThreadTheme = createTheme(threadConfig);
|
|
28
|
-
```
|
|
11
|
+
## SSR
|
|
29
12
|
|
|
30
|
-
|
|
13
|
+
All CSS is pre-generated using `panda-css`, so most components can easily be rendered server-side.
|
|
31
14
|
|
|
32
|
-
|
|
33
|
-
'use client';
|
|
34
|
-
import { ThemeProvider } from 'thread-ui';
|
|
35
|
-
import { ThreadTheme } from '@/thread.config';
|
|
15
|
+
## Custom Themes
|
|
36
16
|
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<ThemeProvider initialTheme={ThreadTheme} initialMode="light">
|
|
40
|
-
{children}
|
|
41
|
-
</ThemeProvider>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
```
|
|
17
|
+
Thread-UI supports custom themes created by the user that override the default theme, even when using SSR in Next.js. To implement a custom theme, simply wrap the application contents in the `ThemeProvider` Component. The provider can be configured with a partial of the `Theme` type, to allow you to customize as much or as little as you want!
|
|
45
18
|
|
|
46
|
-
|
|
19
|
+
For Example:
|
|
47
20
|
|
|
48
21
|
```
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
<html lang="en">
|
|
58
|
-
<body className={`${font.className}`}>
|
|
59
|
-
<Providers>
|
|
60
|
-
<NavMenu />
|
|
61
|
-
<main>{children}</main>
|
|
62
|
-
<Footer />
|
|
63
|
-
</Providers>
|
|
64
|
-
</body>
|
|
65
|
-
</html>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
22
|
+
const ThreadTheme: ThemeConfig = {
|
|
23
|
+
primary: {
|
|
24
|
+
light: '#4f46e5',
|
|
25
|
+
main: '#4338ca',
|
|
26
|
+
dark: '#3730a3',
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
return <ThemeProvider theme={ThreadTheme}>{children}</ThemeProvider>;
|
|
68
30
|
```
|