@kushagradhawan/kookie-ui 0.1.40 → 0.1.42

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.
Files changed (145) hide show
  1. package/README.md +257 -60
  2. package/components.css +436 -80
  3. package/dist/cjs/components/schemas/base-button.schema.d.ts +319 -0
  4. package/dist/cjs/components/schemas/base-button.schema.d.ts.map +1 -0
  5. package/dist/cjs/components/schemas/base-button.schema.js +2 -0
  6. package/dist/cjs/components/schemas/base-button.schema.js.map +7 -0
  7. package/dist/cjs/components/schemas/button.schema.d.ts +686 -0
  8. package/dist/cjs/components/schemas/button.schema.d.ts.map +1 -0
  9. package/dist/cjs/components/schemas/button.schema.js +2 -0
  10. package/dist/cjs/components/schemas/button.schema.js.map +7 -0
  11. package/dist/cjs/components/schemas/icon-button.schema.d.ts +329 -0
  12. package/dist/cjs/components/schemas/icon-button.schema.d.ts.map +1 -0
  13. package/dist/cjs/components/schemas/icon-button.schema.js +2 -0
  14. package/dist/cjs/components/schemas/icon-button.schema.js.map +7 -0
  15. package/dist/cjs/components/schemas/index.d.ts +52 -0
  16. package/dist/cjs/components/schemas/index.d.ts.map +1 -0
  17. package/dist/cjs/components/schemas/index.js +2 -0
  18. package/dist/cjs/components/schemas/index.js.map +7 -0
  19. package/dist/cjs/components/schemas/toggle-button.schema.d.ts +1172 -0
  20. package/dist/cjs/components/schemas/toggle-button.schema.d.ts.map +1 -0
  21. package/dist/cjs/components/schemas/toggle-button.schema.js +2 -0
  22. package/dist/cjs/components/schemas/toggle-button.schema.js.map +7 -0
  23. package/dist/cjs/components/schemas/toggle-icon-button.schema.d.ts +563 -0
  24. package/dist/cjs/components/schemas/toggle-icon-button.schema.d.ts.map +1 -0
  25. package/dist/cjs/components/schemas/toggle-icon-button.schema.js +2 -0
  26. package/dist/cjs/components/schemas/toggle-icon-button.schema.js.map +7 -0
  27. package/dist/cjs/components/sheet.d.ts +1 -1
  28. package/dist/cjs/components/sheet.d.ts.map +1 -1
  29. package/dist/cjs/components/sheet.js +1 -1
  30. package/dist/cjs/components/sheet.js.map +3 -3
  31. package/dist/cjs/components/shell.d.ts +125 -164
  32. package/dist/cjs/components/shell.d.ts.map +1 -1
  33. package/dist/cjs/components/shell.js +1 -1
  34. package/dist/cjs/components/shell.js.map +3 -3
  35. package/dist/cjs/components/sidebar.d.ts +1 -7
  36. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  37. package/dist/cjs/components/sidebar.js +1 -1
  38. package/dist/cjs/components/sidebar.js.map +3 -3
  39. package/dist/cjs/components/theme.d.ts +3 -0
  40. package/dist/cjs/components/theme.d.ts.map +1 -1
  41. package/dist/cjs/components/theme.js +1 -1
  42. package/dist/cjs/components/theme.js.map +3 -3
  43. package/dist/cjs/components/theme.props.d.ts +10 -0
  44. package/dist/cjs/components/theme.props.d.ts.map +1 -1
  45. package/dist/cjs/components/theme.props.js +1 -1
  46. package/dist/cjs/components/theme.props.js.map +3 -3
  47. package/dist/cjs/helpers/font-config.d.ts +96 -0
  48. package/dist/cjs/helpers/font-config.d.ts.map +1 -0
  49. package/dist/cjs/helpers/font-config.js +3 -0
  50. package/dist/cjs/helpers/font-config.js.map +7 -0
  51. package/dist/cjs/helpers/index.d.ts +1 -0
  52. package/dist/cjs/helpers/index.d.ts.map +1 -1
  53. package/dist/cjs/helpers/index.js +1 -1
  54. package/dist/cjs/helpers/index.js.map +2 -2
  55. package/dist/esm/components/schemas/base-button.schema.d.ts +319 -0
  56. package/dist/esm/components/schemas/base-button.schema.d.ts.map +1 -0
  57. package/dist/esm/components/schemas/base-button.schema.js +2 -0
  58. package/dist/esm/components/schemas/base-button.schema.js.map +7 -0
  59. package/dist/esm/components/schemas/button.schema.d.ts +686 -0
  60. package/dist/esm/components/schemas/button.schema.d.ts.map +1 -0
  61. package/dist/esm/components/schemas/button.schema.js +2 -0
  62. package/dist/esm/components/schemas/button.schema.js.map +7 -0
  63. package/dist/esm/components/schemas/icon-button.schema.d.ts +329 -0
  64. package/dist/esm/components/schemas/icon-button.schema.d.ts.map +1 -0
  65. package/dist/esm/components/schemas/icon-button.schema.js +2 -0
  66. package/dist/esm/components/schemas/icon-button.schema.js.map +7 -0
  67. package/dist/esm/components/schemas/index.d.ts +52 -0
  68. package/dist/esm/components/schemas/index.d.ts.map +1 -0
  69. package/dist/esm/components/schemas/index.js +2 -0
  70. package/dist/esm/components/schemas/index.js.map +7 -0
  71. package/dist/esm/components/schemas/toggle-button.schema.d.ts +1172 -0
  72. package/dist/esm/components/schemas/toggle-button.schema.d.ts.map +1 -0
  73. package/dist/esm/components/schemas/toggle-button.schema.js +2 -0
  74. package/dist/esm/components/schemas/toggle-button.schema.js.map +7 -0
  75. package/dist/esm/components/schemas/toggle-icon-button.schema.d.ts +563 -0
  76. package/dist/esm/components/schemas/toggle-icon-button.schema.d.ts.map +1 -0
  77. package/dist/esm/components/schemas/toggle-icon-button.schema.js +2 -0
  78. package/dist/esm/components/schemas/toggle-icon-button.schema.js.map +7 -0
  79. package/dist/esm/components/sheet.d.ts +1 -1
  80. package/dist/esm/components/sheet.d.ts.map +1 -1
  81. package/dist/esm/components/sheet.js +1 -1
  82. package/dist/esm/components/sheet.js.map +3 -3
  83. package/dist/esm/components/shell.d.ts +125 -164
  84. package/dist/esm/components/shell.d.ts.map +1 -1
  85. package/dist/esm/components/shell.js +1 -1
  86. package/dist/esm/components/shell.js.map +3 -3
  87. package/dist/esm/components/sidebar.d.ts +1 -7
  88. package/dist/esm/components/sidebar.d.ts.map +1 -1
  89. package/dist/esm/components/sidebar.js +1 -1
  90. package/dist/esm/components/sidebar.js.map +3 -3
  91. package/dist/esm/components/theme.d.ts +3 -0
  92. package/dist/esm/components/theme.d.ts.map +1 -1
  93. package/dist/esm/components/theme.js +1 -1
  94. package/dist/esm/components/theme.js.map +3 -3
  95. package/dist/esm/components/theme.props.d.ts +10 -0
  96. package/dist/esm/components/theme.props.d.ts.map +1 -1
  97. package/dist/esm/components/theme.props.js +1 -1
  98. package/dist/esm/components/theme.props.js.map +3 -3
  99. package/dist/esm/helpers/font-config.d.ts +96 -0
  100. package/dist/esm/helpers/font-config.d.ts.map +1 -0
  101. package/dist/esm/helpers/font-config.js +3 -0
  102. package/dist/esm/helpers/font-config.js.map +7 -0
  103. package/dist/esm/helpers/index.d.ts +1 -0
  104. package/dist/esm/helpers/index.d.ts.map +1 -1
  105. package/dist/esm/helpers/index.js +1 -1
  106. package/dist/esm/helpers/index.js.map +2 -2
  107. package/package.json +26 -6
  108. package/schemas/base-button.d.ts +2 -0
  109. package/schemas/base-button.json +284 -0
  110. package/schemas/button.d.ts +2 -0
  111. package/schemas/button.json +535 -0
  112. package/schemas/icon-button.d.ts +2 -0
  113. package/schemas/icon-button.json +318 -0
  114. package/schemas/index.d.ts +2 -0
  115. package/schemas/index.json +2016 -0
  116. package/schemas/schemas.d.ts +29 -0
  117. package/schemas/toggle-button.d.ts +2 -0
  118. package/schemas/toggle-button.json +543 -0
  119. package/schemas/toggle-icon-button.d.ts +2 -0
  120. package/schemas/toggle-icon-button.json +326 -0
  121. package/schemas-json.d.ts +12 -0
  122. package/src/components/_internal/base-menu.css +25 -17
  123. package/src/components/_internal/base-sidebar.css +13 -14
  124. package/src/components/dialog.css +12 -0
  125. package/src/components/schemas/base-button.schema.ts +339 -0
  126. package/src/components/schemas/button.schema.ts +198 -0
  127. package/src/components/schemas/icon-button.schema.ts +142 -0
  128. package/src/components/schemas/index.ts +68 -0
  129. package/src/components/schemas/toggle-button.schema.ts +122 -0
  130. package/src/components/schemas/toggle-icon-button.schema.ts +195 -0
  131. package/src/components/sheet.css +68 -20
  132. package/src/components/sheet.tsx +62 -3
  133. package/src/components/shell.css +516 -79
  134. package/src/components/shell.tsx +2055 -928
  135. package/src/components/sidebar.tsx +3 -22
  136. package/src/components/theme.props.tsx +8 -0
  137. package/src/components/theme.tsx +16 -0
  138. package/src/helpers/font-config.ts +167 -0
  139. package/src/helpers/index.ts +1 -0
  140. package/src/styles/fonts.css +16 -13
  141. package/src/styles/tokens/cursor.css +1 -1
  142. package/src/styles/tokens/typography.css +27 -4
  143. package/styles.css +449 -81
  144. package/tokens/base.css +13 -1
  145. package/tokens.css +13 -1
package/README.md CHANGED
@@ -1,6 +1,10 @@
1
- # Kookie UI
1
+ # @kushagradhawan/kookie-ui
2
2
 
3
- A comprehensive React component library and design system, forked from [Radix UI Themes](https://github.com/radix-ui/themes) with enhancements and customizations.
3
+ > A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@kushagradhawan/kookie-ui)](https://www.npmjs.com/package/@kushagradhawan/kookie-ui)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+ [![Beta](https://img.shields.io/badge/status-beta-orange)](https://github.com/kushagradhawan/kookie-ui)
4
8
 
5
9
  ## Installation
6
10
 
@@ -14,107 +18,300 @@ yarn add @kushagradhawan/kookie-ui
14
18
 
15
19
  ## Quick Start
16
20
 
17
- ### 1. Import the CSS
18
-
19
- Import the CSS file in your app root:
20
-
21
21
  ```tsx
22
22
  import '@kushagradhawan/kookie-ui/styles.css';
23
+ import { Theme, Button, Card, Flex, Text } from '@kushagradhawan/kookie-ui';
24
+
25
+ export default function App() {
26
+ return (
27
+ <Theme accentColor="blue" grayColor="gray">
28
+ <Card size="3" variant="soft">
29
+ <Flex direction="column" gap="3" p="4">
30
+ <Text size="3">Welcome to Kookie UI</Text>
31
+ <Button size="3" variant="solid">
32
+ Get Started
33
+ </Button>
34
+ </Flex>
35
+ </Card>
36
+ </Theme>
37
+ );
38
+ }
23
39
  ```
24
40
 
25
- ### 2. Wrap your app with Theme
41
+ ## What is Kookie UI?
42
+
43
+ Kookie UI is a fork of [Radix Themes](https://radix-ui.com/themes) that extends it into a full design system. While Radix provided excellent building blocks, Kookie UI codifies the patterns and rules that make interfaces feel consistent and systematic.
44
+
45
+ ### Key Features
46
+
47
+ - **Systematic Design Tokens** - 12-point progressions for spacing, radius, and shadows with predictable steps
48
+ - **Universal Material System** - Every component understands translucency vs. solidity with theme-level defaults and per-component overrides
49
+ - **Consistent Sizing** - Cards, buttons, dropdowns, selects, and avatars all follow the same scale
50
+ - **Unified Motion** - Transition patterns work consistently across all components
51
+ - **Enhanced Accessibility** - Native tooltip support, stricter aria-label enforcement, and improved keyboard navigation
52
+ - **Layout Patterns** - Shells, sidebars, panels, and toolbars that work together predictably
53
+
54
+ ## Framework Support
55
+
56
+ ### Next.js (App Router)
26
57
 
27
58
  ```tsx
59
+ // app/layout.tsx
60
+ import '@kushagradhawan/kookie-ui/styles.css';
28
61
  import { Theme } from '@kushagradhawan/kookie-ui';
29
62
 
30
- export default function App() {
63
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
31
64
  return (
32
- <Theme>
33
- <div>Your app content</div>
34
- </Theme>
65
+ <html lang="en">
66
+ <body>
67
+ <Theme accentColor="blue" grayColor="gray">
68
+ {children}
69
+ </Theme>
70
+ </body>
71
+ </html>
35
72
  );
36
73
  }
37
74
  ```
38
75
 
39
- ### 3. Start using components
76
+ ### Next.js (Pages Router)
40
77
 
41
78
  ```tsx
42
- import { Button, Flex, Text } from '@kushagradhawan/kookie-ui';
79
+ // pages/_app.tsx
80
+ import '@kushagradhawan/kookie-ui/styles.css';
81
+ import { Theme } from '@kushagradhawan/kookie-ui';
82
+ import type { AppProps } from 'next/app';
43
83
 
44
- export default function MyComponent() {
84
+ export default function App({ Component, pageProps }: AppProps) {
45
85
  return (
46
- <Flex direction="column" gap="2">
47
- <Text>Hello from Kookie UI!</Text>
48
- <Button>Click me</Button>
49
- </Flex>
86
+ <Theme accentColor="blue" grayColor="gray">
87
+ <Component {...pageProps} />
88
+ </Theme>
50
89
  );
51
90
  }
52
91
  ```
53
92
 
54
- ## What's Different from Radix UI Themes?
93
+ ### Vite + React
55
94
 
56
- Kookie UI includes all the components and functionality of Radix UI Themes, plus:
95
+ ```tsx
96
+ // main.tsx
97
+ import React from 'react';
98
+ import ReactDOM from 'react-dom/client';
99
+ import '@kushagradhawan/kookie-ui/styles.css';
100
+ import { Theme } from '@kushagradhawan/kookie-ui';
101
+ import App from './App';
57
102
 
58
- - Enhanced component styling and behavior
59
- - Bug fixes and improvements (like the DropdownMenu.TriggerIcon sizing fix)
60
- - Custom branding and design tokens
61
- - Additional features and optimizations
103
+ ReactDOM.createRoot(document.getElementById('root')!).render(
104
+ <React.StrictMode>
105
+ <Theme accentColor="blue" grayColor="gray">
106
+ <App />
107
+ </Theme>
108
+ </React.StrictMode>,
109
+ );
110
+ ```
62
111
 
63
- ## Getting Updates
112
+ ### Create React App
64
113
 
65
- Kookie UI follows semantic versioning and is updated frequently:
114
+ ```tsx
115
+ // src/index.tsx
116
+ import React from 'react';
117
+ import ReactDOM from 'react-dom/client';
118
+ import '@kushagradhawan/kookie-ui/styles.css';
119
+ import { Theme } from '@kushagradhawan/kookie-ui';
120
+ import App from './App';
66
121
 
67
- - **Patch versions** (0.1.0 → 0.1.1): Bug fixes, small improvements
68
- - **Minor versions** (0.1.x → 0.2.0): New features, enhancements
69
- - **Major versions** (0.x.x → 1.0.0): Breaking changes
122
+ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
70
123
 
71
- ### Stay Updated
124
+ root.render(
125
+ <React.StrictMode>
126
+ <Theme accentColor="blue" grayColor="gray">
127
+ <App />
128
+ </Theme>
129
+ </React.StrictMode>,
130
+ );
131
+ ```
72
132
 
73
- ```bash
74
- # Check for updates
75
- npm outdated @kushagradhawan/kookie-ui
133
+ ### Remix
76
134
 
77
- # Update to latest patch version
78
- npm update @kushagradhawan/kookie-ui
135
+ ```tsx
136
+ // app/root.tsx
137
+ import { Links, Meta, Outlet, Scripts } from '@remix-run/react';
138
+ import { LinksFunction } from '@remix-run/node';
139
+ import { Theme } from '@kushagradhawan/kookie-ui';
140
+ import styles from '@kushagradhawan/kookie-ui/styles.css';
79
141
 
80
- # Update to latest version (including minor/major)
81
- npm install @kushagradhawan/kookie-ui@latest
142
+ export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }];
143
+
144
+ export default function App() {
145
+ return (
146
+ <html>
147
+ <head>
148
+ <Meta />
149
+ <Links />
150
+ </head>
151
+ <body>
152
+ <Theme accentColor="blue" grayColor="gray">
153
+ <Outlet />
154
+ </Theme>
155
+ <Scripts />
156
+ </body>
157
+ </html>
158
+ );
159
+ }
82
160
  ```
83
161
 
84
- ### Version Pinning Strategies
162
+ ### Gatsby
85
163
 
86
- ```json
87
- {
88
- "dependencies": {
89
- // Auto-update patches only (recommended for stability)
90
- "@kushagradhawan/kookie-ui": "~0.1.0",
164
+ ```js
165
+ // gatsby-browser.js
166
+ import '@kushagradhawan/kookie-ui/styles.css';
167
+ ```
91
168
 
92
- // Auto-update minor versions (get new features)
93
- "@kushagradhawan/kookie-ui": "^0.1.0",
169
+ ```tsx
170
+ // src/pages/_app.tsx
171
+ import { Theme } from '@kushagradhawan/kookie-ui';
94
172
 
95
- // Pin to exact version (maximum stability)
96
- "@kushagradhawan/kookie-ui": "0.1.0"
97
- }
98
- }
173
+ export const wrapRootElement = ({ element }) => (
174
+ <Theme accentColor="blue" grayColor="gray">
175
+ {element}
176
+ </Theme>
177
+ );
99
178
  ```
100
179
 
101
- ## Documentation
180
+ ## CSS Imports
102
181
 
103
- Since Kookie UI maintains API compatibility with Radix UI Themes, you can refer to the comprehensive [Radix UI Themes documentation](https://radix-ui.com/themes/docs) for component usage, props, and examples.
182
+ ### Complete Stylesheet
104
183
 
105
- For Kookie UI specific changes and enhancements, see our [GitHub repository](https://github.com/kushagradhawan/HelloKookie).
184
+ ```tsx
185
+ import '@kushagradhawan/kookie-ui/styles.css';
186
+ ```
106
187
 
107
- ## License
188
+ ### Modular Imports
108
189
 
109
- MIT License - see [LICENSE](./LICENSE) for details.
190
+ ```tsx
191
+ import '@kushagradhawan/kookie-ui/tokens.css'; // Design tokens
192
+ import '@kushagradhawan/kookie-ui/components.css'; // Component styles
193
+ import '@kushagradhawan/kookie-ui/utilities.css'; // Utility classes
194
+ import '@kushagradhawan/kookie-ui/layout.css'; // Layout utilities
195
+ ```
110
196
 
111
- This project is a fork of [Radix UI Themes](https://github.com/radix-ui/themes). Original work Copyright (c) 2023 WorkOS.
197
+ ## Requirements
112
198
 
113
- ## Contributing
199
+ - React 16.8+ through React 19
200
+ - Node.js 16+ (for development)
201
+ - TypeScript support built-in
202
+
203
+ ```json
204
+ {
205
+ "peerDependencies": {
206
+ "react": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
207
+ "react-dom": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
208
+ }
209
+ }
210
+ ```
211
+
212
+ ## Components
213
+
214
+ ### Layout
215
+
216
+ - `Shell` - Main application shell with header, sidebar, and content areas
217
+ - `Sidebar` - Collapsible sidebar navigation
218
+ - `Flex` - Flexible container with gap support
219
+ - `Grid` - CSS Grid container
220
+ - `Container` - Responsive container with max-width
221
+ - `Section` - Semantic section wrapper
222
+
223
+ ### Navigation
224
+
225
+ - `Tabs` - Tab navigation component
226
+ - `SegmentedControl` - Segmented control for mutually exclusive options
227
+ - `TabNav` - Tab navigation for page-level navigation
228
+
229
+ ### Data Entry
230
+
231
+ - `Button` - Primary action button
232
+ - `IconButton` - Icon-only button
233
+ - `ToggleButton` - Toggle state button
234
+ - `ToggleIconButton` - Toggle state icon button
235
+ - `TextField` - Text input field
236
+ - `TextArea` - Multi-line text input
237
+ - `Select` - Dropdown selection
238
+ - `Checkbox` - Checkbox input
239
+ - `CheckboxGroup` - Group of checkboxes
240
+ - `CheckboxCards` - Card-based checkbox selection
241
+ - `Radio` - Radio button input
242
+ - `RadioGroup` - Group of radio buttons
243
+ - `RadioCards` - Card-based radio selection
244
+ - `Switch` - Toggle switch
245
+ - `Slider` - Range slider input
246
+ - `Progress` - Progress indicator
247
+
248
+ ### Data Display
249
+
250
+ - `Card` - Content card container
251
+ - `Avatar` - User avatar image
252
+ - `Badge` - Status badge
253
+ - `Image` - Responsive image component
254
+ - `Table` - Data table
255
+ - `DataList` - List of data items
256
+ - `Skeleton` - Loading skeleton placeholder
257
+
258
+ ### Feedback
259
+
260
+ - `AlertDialog` - Modal alert dialog
261
+ - `Dialog` - Modal dialog
262
+ - `Sheet` - Slide-out panel
263
+ - `Popover` - Floating content panel
264
+ - `HoverCard` - Hover-triggered card
265
+ - `Tooltip` - Contextual tooltip
266
+ - `Callout` - Callout message
267
+ - `Spinner` - Loading spinner
268
+
269
+ ### Overlays
270
+
271
+ - `DropdownMenu` - Dropdown menu
272
+ - `ContextMenu` - Right-click context menu
273
+ - `Select` - Dropdown selection
274
+
275
+ ### Typography
276
+
277
+ - `Text` - Text component with semantic styling
278
+ - `Heading` - Heading component
279
+ - `Code` - Inline code
280
+ - `Kbd` - Keyboard key display
281
+ - `Blockquote` - Block quote
282
+ - `Quote` - Inline quote
283
+ - `Em` - Emphasis
284
+ - `Strong` - Strong emphasis
285
+
286
+ ### Layout Utilities
287
+
288
+ - `AspectRatio` - Maintain aspect ratio
289
+ - `Inset` - Inset spacing
290
+ - `Separator` - Visual separator
291
+ - `ScrollArea` - Custom scrollable area
292
+
293
+ ## Theming
294
+
295
+ Kookie UI uses a comprehensive theming system with:
296
+
297
+ - **Accent Colors** - Primary brand colors (blue, green, orange, etc.)
298
+ - **Gray Colors** - Neutral color scales (gray, mauve, slate, etc.)
299
+ - **Material System** - Translucent vs. solid surfaces
300
+ - **Size Scales** - Consistent sizing across components
301
+ - **Spacing System** - 12-point spacing progression
302
+ - **Typography** - Font scales and weights
303
+ - **Dark Mode** - Automatic dark mode support
304
+
305
+ ## Status
306
+
307
+ ⚠️ **Beta** - Kookie UI is in beta. Components and APIs are still evolving, and breaking changes may happen. Check changelogs carefully before upgrading.
308
+
309
+ ## License
114
310
 
115
- Contributions are welcome! Please see our [contributing guidelines](https://github.com/kushagradhawan/HelloKookie/blob/main/CONTRIBUTING.md) for details.
311
+ MIT © [Kushagra Dhawan](https://github.com/kushagradhawan)
116
312
 
117
- ## Support
313
+ ## Links
118
314
 
119
- - [GitHub Issues](https://github.com/kushagradhawan/HelloKookie/issues)
120
- - [Discussions](https://github.com/kushagradhawan/HelloKookie/discussions)
315
+ - [Documentation](https://github.com/kushagradhawan/kookie-ui)
316
+ - [GitHub Repository](https://github.com/kushagradhawan/kookie-ui)
317
+ - [Issue Tracker](https://github.com/kushagradhawan/kookie-ui/issues)