├── .changeset ├── README.md └── config.json ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── README.md ├── apps └── docs │ ├── .eslintrc.js │ ├── .gitignore │ ├── .prettierignore │ ├── README.md │ ├── components │ ├── Code.tsx │ ├── ColorTables.tsx │ ├── ComponentsList.tsx │ ├── Introduction copy.tsx │ ├── LandingPage │ │ ├── ButtonExample.tsx │ │ ├── LandingPage.tsx │ │ ├── ToDoExample.tsx │ │ └── index.tsx │ ├── Logo.tsx │ ├── ThemeGenerator │ │ ├── ColorSelector.tsx │ │ ├── ColorSelectorWithName.tsx │ │ ├── Preview │ │ │ ├── AlertDialogExample.tsx │ │ │ ├── Alerts.tsx │ │ │ ├── Buttons.tsx │ │ │ ├── Card.tsx │ │ │ ├── DropdownExample.tsx │ │ │ ├── Header.tsx │ │ │ ├── Landing.tsx │ │ │ ├── Preview.tsx │ │ │ ├── SelectExample.tsx │ │ │ └── index.ts │ │ ├── ThemeGenerator.tsx │ │ └── index.ts │ └── demo │ │ ├── ButtonDemo.tsx │ │ ├── CollapsibleDemo.tsx │ │ ├── ContextMenuDemo.tsx │ │ └── NavigationMenuDemo.tsx │ ├── cypress.config.ts │ ├── cypress │ ├── e2e │ │ └── spec.cy.ts │ └── fixtures │ │ └── example.json │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── _meta.json │ ├── api │ │ └── hello.ts │ ├── docs │ │ ├── FAQ.mdx │ │ ├── _meta.json │ │ ├── components │ │ │ ├── Accordion.mdx │ │ │ ├── AlertDialog.mdx │ │ │ ├── AspectRatio.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Button.mdx │ │ │ ├── Checkbox.mdx │ │ │ ├── Collapsible.mdx │ │ │ ├── ContextMenu.mdx │ │ │ ├── Copy.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── DropdownMenu.mdx │ │ │ ├── Input.mdx │ │ │ ├── Label.mdx │ │ │ ├── Menubar.mdx │ │ │ ├── NavigationMenu.mdx │ │ │ ├── Popover.mdx │ │ │ ├── Progress.mdx │ │ │ ├── RadioGroup.mdx │ │ │ ├── Select.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tabs.mdx │ │ │ ├── TextArea.mdx │ │ │ ├── Toggle.mdx │ │ │ ├── Tooltip.mdx │ │ │ ├── _meta.json │ │ │ └── index.mdx │ │ ├── credits.mdx │ │ ├── install.md │ │ ├── introduction.mdx │ │ ├── key-concepts │ │ │ ├── _meta.json │ │ │ ├── accessibility.mdx │ │ │ ├── colors.mdx │ │ │ ├── customization.mdx │ │ │ └── themeing.mdx │ │ └── theme.mdx │ └── index.mdx │ ├── postcss.config.js │ ├── public │ ├── 100-900-example.png │ ├── avatar_sally.png │ ├── avatar_steve.png │ ├── bonapp_color_study.jpeg │ ├── chimera-og-image-old.png │ ├── chimera-og-image.png │ ├── chimera-theme-gen-image.png │ ├── content-example.png │ ├── favicon.ico │ ├── logo.svg │ ├── next.svg │ ├── on-example.jpeg │ ├── prominence-example.png │ ├── subtle-example.png │ ├── thirteen.svg │ ├── vercel.svg │ └── vercel_color_study.png │ ├── styles │ └── globals.css │ ├── tailwind.config.js │ ├── theme.config.jsx │ ├── tsconfig.json │ └── utils │ ├── colors.tsx │ ├── themestyles.tsx │ ├── updateColors.js │ └── utils.tsx ├── package.json ├── packages ├── components │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── docgen.js │ ├── package.json │ ├── postcss.config.js │ ├── src │ │ ├── Accordion.tsx │ │ ├── AlertDialog.tsx │ │ ├── AspectRatio.tsx │ │ ├── Avatar.tsx │ │ ├── Button.tsx │ │ ├── Checkbox.tsx │ │ ├── Collapsible.tsx │ │ ├── ContextMenu.tsx │ │ ├── Copy.tsx │ │ ├── Dialog.tsx │ │ ├── DropdownMenu.tsx │ │ ├── HoverCard.tsx │ │ ├── Input.tsx │ │ ├── Label.tsx │ │ ├── Menubar.tsx │ │ ├── NavigationMenu.tsx │ │ ├── Popover.tsx │ │ ├── Progress.tsx │ │ ├── RadioGroup.tsx │ │ ├── ScrollArea.tsx │ │ ├── Select.tsx │ │ ├── Separator.tsx │ │ ├── Showcase.tsx │ │ ├── Slider.tsx │ │ ├── Switch.tsx │ │ ├── Tabs.tsx │ │ ├── Test.tsx │ │ ├── TextArea.tsx │ │ ├── ThemePicker.tsx │ │ ├── Toggle.tsx │ │ ├── Tooltip.tsx │ │ └── index.tsx │ ├── styles.css │ ├── tailwind.config.js │ ├── test.json │ ├── tsconfig.json │ ├── tsdocSync.js │ ├── tsup.config.ts │ └── utils │ │ └── index.tsx ├── eslint-config-chimera │ ├── index.js │ └── package.json ├── tailwind-config │ ├── package.json │ ├── postcss.config.js │ └── tailwind.config.js ├── tsconfig │ ├── base.json │ ├── nextjs.json │ ├── node16.json │ ├── package.json │ └── react-library.json └── tw-plugin │ ├── index.js │ └── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── turbo.json /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["docs"] 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-chimera` 4 | extends: ["chimera"], 5 | settings: { 6 | next: { 7 | rootDir: ["apps/*/"], 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .turbo 4 | *.log 5 | .next 6 | dist 7 | dist-ssr 8 | *.local 9 | .env 10 | .cache 11 | server/dist 12 | public/dist 13 | storybook-static/ 14 | apps/docs/cypress/videos/ 15 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers = true 2 | node-linker=hoisted 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 11 | 16 | 59 | 60 | 61 |

Chimera UI

62 |
63 | 64 |

Beautiful, accessible, and fully customizable with Tailwind.

65 | 66 | ## Features 67 | 68 | - Fully accessible components, with Radix Primitives under the hood. 69 | - Includes additional components beyond Radix, such as Button and Input. 70 | - Components come pre-styled. Styles can be easily overwritten with Tailwind (Chimera uses tw-merge under the hood). 71 | - Semantic color system built in. No more guessing what color to use, just use the same semantic color names across all your projects. 72 | - Theme generator that quickly generates CSS themes for you. 73 | - Tailwind plugin to keep tailwind.config.js nice and clean. 74 | - Tree-shakeable. Use named imports without worrying about bundle-size! 75 | 76 | ## Installation 77 | 78 | See official docs for more information 79 | 80 | 1. `npm install @chimera-ui/components @chimera-ui/tw-plugin` 81 | 2. Modify your `tailwind.config.js` to include: 82 | 83 | - `"./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}",` in the `content` array 84 | - `require("@chimera-ui/tw-plugin")` in the `plugins` array 85 | - ```js 86 | module.exports = { 87 | content: [ 88 | "./pages/**/*.{js,ts,jsx,tsx,md,mdx}", 89 | "./components/**/*.{js,ts,jsx,tsx}", 90 | "./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}", // This line is important! If you don't include this, Chimera's styles will be purged 91 | , 92 | ], 93 | plugins: [ 94 | require("@chimera-ui/tw-plugin"), // This is important! This extends your tailwind theme to consume the CSS variables. 95 | ], 96 | }; 97 | ``` 98 | 99 | 3. Use the theme generator to generate CSS themes. Add the CSS variables to your global css file. 100 | 101 | ## Repository 102 | 103 | `npm run build` will trigger `prebuild`. In `prebuild`, @chimera-ui/components will run tsdocSync.js, which syncs the classNames from each component to a tsdoc comment above it. 104 | -------------------------------------------------------------------------------- /apps/docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ["eslint-config-chimera"], 4 | }; 5 | -------------------------------------------------------------------------------- /apps/docs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /apps/docs/.prettierignore: -------------------------------------------------------------------------------- 1 | /components/LandingPage -------------------------------------------------------------------------------- /apps/docs/README.md: -------------------------------------------------------------------------------- 1 | # To be completed 2 | -------------------------------------------------------------------------------- /apps/docs/components/Code.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Copy } from "@chimera-ui/components"; 2 | import React from "react"; 3 | 4 | export const Code = ({ children }: { children: string }) => { 5 | const [copied, setCopied] = React.useState(false); 6 | 7 | return ( 8 | 
13 |       
17 |       {children}
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /apps/docs/components/ColorTables.tsx: -------------------------------------------------------------------------------- 1 | import { ThemePicker } from "@chimera-ui/components"; 2 | import { ColorType, ColorsType } from "@/utils/colors"; 3 | import { colors } from "@/utils/colors"; 4 | 5 | const ColorTableItem = ({ color }: { color: ColorType }) => { 6 | return ( 7 |
8 |
9 |
12 |
13 |
14 |
15 |
{color.name}
16 |
{color.usage}
17 |
18 |
19 |
{color.description}
20 |
{color.cssVariable}
21 |
22 | ); 23 | }; 24 | 25 | export const ColorTable = ({ colorPrefix }: { colorPrefix: string }) => { 26 | return ( 27 |
28 |
29 | 30 |
31 | 32 |
33 |
34 |
35 |
Name & Usage
36 |
Description
37 |
CSS Variable
38 |
39 |
40 |
41 | {Object.keys(colors).map((colorName) => { 42 | if (colorName.startsWith(colorPrefix)) { 43 | return ( 44 | 48 | ); 49 | } 50 | })} 51 |
52 |
53 | ); 54 | }; 55 | -------------------------------------------------------------------------------- /apps/docs/components/ComponentsList.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import ComponentsMetaJson from "../pages/docs/components/_meta.json"; 3 | 4 | export const ComponentsList = () => { 5 | return ( 6 |
7 | {Object.entries(ComponentsMetaJson).map((componentEntry) => { 8 | const [fileName, componentName] = componentEntry; 9 | if (fileName === "index") return; 10 | return ( 11 | 12 |
13 | {componentName as string} 14 |
15 | 16 | ); 17 | })} 18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /apps/docs/components/LandingPage/ButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@chimera-ui/components"; 2 | 3 | export const ButtonExample = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /apps/docs/components/LandingPage/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./LandingPage"; 2 | -------------------------------------------------------------------------------- /apps/docs/components/Logo.tsx: -------------------------------------------------------------------------------- 1 | export const Logo = () => { 2 | return ( 3 |
4 |
5 | 12 | 17 | 60 | 61 | 62 |
63 |
Chimera UI
64 |
65 | ); 66 | }; 67 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/ColorSelector.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { ColorType } from "@/utils/colors"; 3 | import { Popover } from "@chimera-ui/components"; 4 | import clsx from "clsx"; 5 | import { ChromePicker } from "react-color"; 6 | export const ColorSelector = ({ 7 | color, 8 | handleColorChange, 9 | }: { 10 | color: ColorType; 11 | handleColorChange: (color: string, value: string) => void; 12 | }) => { 13 | const handleChange = (pickerValue: any) => { 14 | handleColorChange(color.name, pickerValue.hex); 15 | }; 16 | 17 | return ( 18 |
19 | 20 |
21 | 27 | 38 |
39 | 40 | 41 | 42 | 43 |
44 |
45 |
46 | {color.name} 47 |
48 |
49 | {" "} 50 | {color.description} 51 |
52 |
53 | 54 | 59 |
60 | 61 | 62 | 63 |
64 | ); 65 | }; 66 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/ColorSelectorWithName.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { ColorType } from "@/utils/colors"; 3 | import { Popover } from "@chimera-ui/components"; 4 | import clsx from "clsx"; 5 | import { ChromePicker } from "react-color"; 6 | export const ColorSelector = ({ 7 | color, 8 | handleColorChange, 9 | }: { 10 | color: ColorType; 11 | handleColorChange: (color: string, value: string) => void; 12 | }) => { 13 | const handleChange = (pickerValue: any) => { 14 | handleColorChange(color.name, pickerValue.hex); 15 | }; 16 | 17 | return ( 18 |
19 | 20 |
21 | 22 |
28 |
{color.displayName}
29 | 30 | 41 |
42 | 43 | 44 | 45 | 46 |
47 |
48 |
49 | {color.name} 50 |
51 |
52 | {" "} 53 | {color.description} 54 |
55 |
56 | 57 | 62 |
63 | 64 | 65 | 66 |
67 | ); 68 | }; 69 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/AlertDialogExample.tsx: -------------------------------------------------------------------------------- 1 | import { AlertDialog, Button } from "@chimera-ui/components"; 2 | 3 | export const AlertDialogExample = () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Are you absolutely sure? 14 | 15 | 16 | This action cannot be undone. This will permanently delete your 17 | account and remove your data from our servers. 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/Alerts.tsx: -------------------------------------------------------------------------------- 1 | export const Alerts = () => { 2 | return ( 3 |
4 |
5 | success alert 6 |
7 |
8 | success alert inverse 9 |
10 |
11 | danger alert 12 |
13 |
14 | danger alert inverse 15 |
16 |
17 | warning alert 18 |
19 |
20 | warning alert inverse 21 |
22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/Buttons.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@chimera-ui/components"; 2 | 3 | export const Buttons = () => { 4 | return ( 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | ); 19 | }; 20 | 21 | // default: "bg-primary text-primary-content hover:bg-primary-focus", 22 | // secondary: 23 | // "bg-secondary text-secondary-content hover:bg-secondary-focus", 24 | // "secondary-outline": 25 | // "bg-transparent border border-secondary text-secondary hover:bg-secondary-focus hover:text-secondary-content", 26 | // destructive: "bg-danger text-danger-content hover:bg-danger-focus", 27 | // outline: "bg-transparent border border-primary-200 hover:bg-base-2", 28 | // subtle: 29 | // "bg-primary-subtle text-primary-subtle-content hover:bg-primary hover:text-primary-content", 30 | // ghost: 31 | // "bg-transparent hover:bg-base-2 data-[state=open]:bg-transparent ", 32 | // link: "bg-transparent underline-offset-4 hover:underline text-slate-900 hover:bg-transparent ", 33 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/Card.tsx: -------------------------------------------------------------------------------- 1 | export const Card = () => { 2 | return ( 3 |
7 |
8 | random 13 |
14 |
15 |

16 | {`A random blog post title (text-base-content)`} 17 |

18 |

{`Some description that you'd find for a blog post. This one is using text-base-content-2 to provide some contrast with the title.`}

19 |
20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/DropdownExample.tsx: -------------------------------------------------------------------------------- 1 | import { HamburgerMenuIcon } from "@radix-ui/react-icons"; 2 | import { Button, DropdownMenu } from "@chimera-ui/components"; 3 | import { 4 | Cloud, 5 | CreditCard, 6 | Github, 7 | Keyboard, 8 | LifeBuoy, 9 | LogOut, 10 | Mail, 11 | MessageSquare, 12 | Plus, 13 | PlusCircle, 14 | Settings, 15 | User, 16 | UserPlus, 17 | Users, 18 | } from "lucide-react"; 19 | 20 | export const DropDownExample = () => { 21 | return ( 22 | 23 | 24 | 27 | 28 | 29 | My Account 30 | 31 | 32 | 33 | 34 | Profile 35 | ⇧⌘P 36 | 37 | 38 | 39 | Billing 40 | ⌘B 41 | 42 | 43 | 44 | Settings 45 | ⌘S 46 | 47 | 48 | 49 | Keyboard shortcuts 50 | ⌘K 51 | 52 | 53 | 54 | 55 | 56 | 57 | Team 58 | 59 | 60 | 61 | 62 | Invite users 63 | 64 | 65 | 66 | 67 | 68 | Email 69 | 70 | 71 | 72 | Message 73 | 74 | 75 | 76 | 77 | More... 78 | 79 | 80 | 81 | 82 | 83 | 84 | New Team 85 | ⌘+T 86 | 87 | 88 | 89 | 90 | 91 | GitHub 92 | 93 | 94 | 95 | Support 96 | 97 | 98 | 99 | API 100 | 101 | 102 | 103 | 104 | Log out 105 | ⇧⌘Q 106 | 107 | 108 | 109 | ); 110 | }; 111 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/Header.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | 3 | import { DropDownExample } from "./DropdownExample"; 4 | import { Sprout } from "lucide-react"; 5 | import { Input } from "@chimera-ui/components"; 6 | 7 | export const Header = () => { 8 | return ( 9 |
10 |
11 | logo 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/Landing.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@chimera-ui/components"; 2 | export const Landing = () => { 3 | return ( 4 |
5 |
6 | Scroll{" "} 7 | 8 | down 9 | {" "} 10 | to see more examples 11 |
12 |
13 | 14 | 15 |
16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/Preview.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import { Button } from "@chimera-ui/components"; 3 | import { AlertDialogExample } from "./AlertDialogExample"; 4 | import { Alerts } from "./Alerts"; 5 | import { Buttons } from "./Buttons"; 6 | import { Card } from "./Card"; 7 | import { DropDownExample } from "./DropdownExample"; 8 | import { Header } from "./Header"; 9 | import { Landing } from "./Landing"; 10 | import { SelectExample } from "./SelectExample"; 11 | 12 | export const Preview = () => { 13 | return ( 14 |
15 |
16 |
20 |
21 | 22 |
23 | 24 |
25 |
26 | Text Examples 27 |
28 |
29 | Title (text-base-content-2) 30 |
31 |
32 | 11/11/2040 (text-base-content-3) 33 |
34 |

35 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 36 | condimentum, nisl ut aliquam aliquet, nunc nisl aliquet nisl, nec 37 | tincidunt nisl nunc vel nunc. Sed condimentum, nisl ut aliquam 38 | aliquet, nunc nisl aliquam nisl, nec tincidunt nisl nunc vel nunc. 39 | (text-base-content). 40 |

41 |
42 | 43 | 44 | 45 |
46 |
47 | 48 |
49 |
50 | Overlays (Click them) 51 |
52 |
53 | 54 | 55 | 56 |
57 |
58 | 59 |
60 |
61 | Buttons 62 |
63 | 64 |
65 | 66 |
67 |
68 | Callouts 69 |
70 | 71 |
72 |
73 |
74 | ); 75 | }; 76 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/SelectExample.tsx: -------------------------------------------------------------------------------- 1 | import { Select } from "@chimera-ui/components"; 2 | 3 | export const SelectExample = () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | Fruits 12 | Apple 13 | Banana 14 | Blueberry 15 | Grapes 16 | Pineapple 17 | 18 | 19 | 20 | Vegetables 21 | Aubergine 22 | Broccoli 23 | 24 | Carrot 25 | 26 | Courgette 27 | Leek 28 | 29 | 30 | 31 | Meat 32 | Beef 33 | Chicken 34 | Lamb 35 | Pork 36 | 37 | 38 | 39 | ); 40 | }; 41 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/Preview/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Preview"; 2 | -------------------------------------------------------------------------------- /apps/docs/components/ThemeGenerator/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeGenerator"; 2 | -------------------------------------------------------------------------------- /apps/docs/components/demo/ButtonDemo.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@chimera-ui/components"; 2 | 3 | export const ButtonDemo = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /apps/docs/components/demo/CollapsibleDemo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RowSpacingIcon, Cross2Icon } from "@radix-ui/react-icons"; 3 | import { Button, Showcase, Collapsible } from "@chimera-ui/components"; 4 | 5 | export const CollapsibleDemo = () => { 6 | const [open, setOpen] = React.useState(false); 7 | return ( 8 | 13 |
20 | @peduarte starred 3 repositories 21 | 22 | 25 | 26 |
27 | 28 |
29 | @radix-ui/primitives 30 |
31 | 32 | 33 |
34 | @radix-ui/colors 35 |
36 |
37 | @stitches/react 38 |
39 | 40 | 41 | ); 42 | }; 43 | 44 | export default CollapsibleDemo; 45 | -------------------------------------------------------------------------------- /apps/docs/components/demo/ContextMenuDemo.tsx: -------------------------------------------------------------------------------- 1 | import { Button, ContextMenu } from "@chimera-ui/components"; 2 | import { useState } from "react"; 3 | import { 4 | CheckIcon, 5 | ChevronRightIcon, 6 | DotFilledIcon, 7 | } from "@radix-ui/react-icons"; 8 | 9 | export function ContextMenuDemo() { 10 | const [bookmarksChecked, setBookmarksChecked] = useState(true); 11 | const [urlsChecked, setUrlsChecked] = useState(false); 12 | const [person, setPerson] = useState("pedro"); 13 | 14 | return ( 15 | 16 | 17 | Right click here 18 | 19 | 20 | 21 | Back 22 | ⌘[ 23 | 24 | 25 | Forward 26 | ⌘] 27 | 28 | 29 | Reload 30 | ⌘R 31 | 32 | 33 | More Tools 34 | 35 | 36 | Save Page As... 37 | ⇧⌘S 38 | 39 | Create Shortcut... 40 | Name Window... 41 | 42 | Developer Tools 43 | 44 | 45 | 46 | 47 | Show Bookmarks Bar 48 | ⌘⇧B 49 | 50 | Show Full URLs 51 | 52 | 53 | People 54 | 55 | 56 | Pedro Duarte 57 | 58 | Colm Tuite 59 | 60 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /apps/docs/components/demo/NavigationMenuDemo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Link from "next/link"; 3 | import { NavigationMenu, cn, Showcase } from "@chimera-ui/components"; 4 | 5 | const components: { title: string; href: string; description: string }[] = [ 6 | { 7 | title: "Alert Dialog", 8 | href: "/docs/components/AlertDialog ", 9 | description: 10 | "A modal dialog that interrupts the user with important content and expects a response.", 11 | }, 12 | { 13 | title: "Hover Card", 14 | href: "/docs/primitives/hover-card", 15 | description: 16 | "For sighted users to preview content available behind a link.", 17 | }, 18 | { 19 | title: "Progress", 20 | href: "/docs/components/Progress", 21 | description: 22 | "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", 23 | }, 24 | { 25 | title: "Scroll-area", 26 | href: "/docs/primitives/scroll-area", 27 | description: "Visually or semantically separates content.", 28 | }, 29 | { 30 | title: "Tabs", 31 | href: "/docs/components/Tabs", 32 | description: 33 | "A set of layered sections of content—known as tab panels—that are displayed one at a time.", 34 | }, 35 | { 36 | title: "Tooltip", 37 | href: "/docs/components/Tooltip", 38 | description: 39 | "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", 40 | }, 41 | ]; 42 | 43 | export const NavigationMenuDemo = () => { 44 | return ( 45 |
46 | 47 | 48 | 49 | 50 | Getting started 51 | 52 | 53 | 80 | 81 | 82 | 83 | Components 84 | 85 |
    86 | {components.map((component) => ( 87 | 92 | {component.description} 93 | 94 | ))} 95 |
96 | 97 | 98 | 99 | 100 | Documentation 101 | 102 | 103 | 104 | 105 | 106 | 107 |
108 | ); 109 | }; 110 | 111 | const ListItem = React.forwardRef< 112 | React.ElementRef<"a">, 113 | React.ComponentPropsWithoutRef<"a"> 114 | >(({ className, title, children, ...props }, ref) => { 115 | return ( 116 |
  • 117 | 118 | 126 |
    {title}
    127 |

    128 | {children} 129 |

    130 |     131 |     132 |
    • 133 | ); 134 | }); 135 | ListItem.displayName = "ListItem"; 136 | -------------------------------------------------------------------------------- /apps/docs/cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "cypress"; 2 | 3 | export default defineConfig({ 4 | e2e: { 5 | setupNodeEvents(on, config) { 6 | // implement node event listeners here 7 | }, 8 | experimentalStudio: true, 9 | baseUrl: "http://localhost:3000", 10 | supportFile: false, 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /apps/docs/cypress/e2e/spec.cy.ts: -------------------------------------------------------------------------------- 1 | import MetaJson from "../../pages/docs/components/_meta.json"; 2 | 3 | describe("Docs", () => { 4 | it("loads homepage", () => { 5 | cy.visit("/"); 6 | }); 7 | 8 | const pages = Object.keys(MetaJson).map((meta) => meta); 9 | pages.forEach((page) => { 10 | if (page === "index") return; 11 | it(`loads ${page} page`, () => { 12 | cy.visit(`docs/components/${page}`); 13 | it("Should not contain NoDisplayName or ", () => { 14 | cy.contains("").should("not.exist"); 15 | cy.contains("").should("not.exist"); // can show up if you assign displayname to parent component but not subcomponents. 16 | }); 17 | }); 18 | }); 19 | 20 | // it("loads all component pages", () => { 21 | // const pages = Object.keys(MetaJson).map((meta) => meta); 22 | // pages.forEach((page) => { 23 | // if (page === "index") return; 24 | // cy.visit(`docs/components/${page}`); 25 | 26 | // cy.contains("NoDisplayName").should("not.exist"); 27 | // }); 28 | // }); 29 | 30 | it("theme generator generates can click through", () => { 31 | /* ==== Generated with Cypress Studio ==== */ 32 | cy.visit("http://localhost:3000/docs/theme"); 33 | cy.get(":nth-child(1) > .justify-center > .group > .flex > .px-2").click(); 34 | cy.get(".saturation-white").click(); 35 | cy.get(".hidden.\\@\\[50px\\]\\:block > .text-sm").click(); 36 | cy.get(".transition-all > .gap-4 > .items-center").click(); 37 | cy.get(".transition-all > .gap-4 > .bg-primary").click(); 38 | /* ==== End Cypress Studio ==== */ 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /apps/docs/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /apps/docs/next.config.js: -------------------------------------------------------------------------------- 1 | const withNextra = require("nextra")({ 2 | theme: "nextra-theme-docs", 3 | themeConfig: "./theme.config.jsx", 4 | images: { 5 | remotePatterns: [ 6 | { 7 | hostname: "images.unsplash.com", 8 | }, 9 | ], 10 | }, 11 | }); 12 | 13 | module.exports = withNextra(); 14 | -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "test": "cypress run" 11 | }, 12 | "dependencies": { 13 | "@chimera-ui/components": "workspace:*", 14 | "@chimera-ui/tw-plugin": "workspace:*", 15 | "@headlessui/react": "^1.7.7", 16 | "@heroicons/react": "^2.0.13", 17 | "@next/font": "13.1.1", 18 | "@radix-ui/react-icons": "^1.1.1", 19 | "@tailwindcss/container-queries": "^0.1.0", 20 | "@tailwindcss/line-clamp": "^0.4.2", 21 | "@types/node": "18.11.18", 22 | "@types/react": "18.0.26", 23 | "@types/react-color": "^3.0.6", 24 | "@types/react-dom": "18.0.10", 25 | "@vercel/analytics": "^0.1.10", 26 | "clsx": "^1.2.1", 27 | "color": "^4.2.3", 28 | "eslint": "8.30.0", 29 | "eslint-config-next": "13.1.1", 30 | "framer-motion": "^10.2.4", 31 | "next": "13.1.1", 32 | "nextra": "^2.0.1", 33 | "nextra-theme-docs": "^2.0.1", 34 | "raw-loader": "^4.0.2", 35 | "react": "18.2.0", 36 | "react-color": "^2.19.3", 37 | "react-dom": "18.2.0", 38 | "react-element-to-jsx-string": "^15.0.0", 39 | "typescript": "4.9.4" 40 | }, 41 | "devDependencies": { 42 | "@types/color": "^3.0.3", 43 | "@types/react-resizable": "^3.0.3", 44 | "autoprefixer": "^10.4.13", 45 | "cypress": "^12.7.0", 46 | "postcss": "^8.4.20", 47 | "react-docgen": "6.0.0-beta.5", 48 | "tailwindcss": "^3.2.4" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /apps/docs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | import { Analytics } from "@vercel/analytics/react"; 4 | 5 | export default function App({ Component, pageProps }: AppProps) { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /apps/docs/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from "next/document"; 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
    9 |
    10 | 11 |
    12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /apps/docs/pages/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": { 3 | "title": "Documentation", 4 | "type": "page" 5 | }, 6 | "theme": { 7 | "title": "Theme Generator", 8 | "type": "page", 9 | "href": "/docs/theme" 10 | }, 11 | "components": { 12 | "title": "Components", 13 | "type": "page", 14 | "href": "/docs/components" 15 | }, 16 | "index": { 17 | "title": "Introduction", 18 | "type": "page", 19 | "display": "hidden", 20 | "theme": { 21 | "layout": "raw" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /apps/docs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/FAQ.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FAQ" 3 | --- 4 | 5 |
    6 | 7 | { 8 | "A component library built on top of another component library? Why would you do such a thing?" 9 | } 10 | 11 | Radix is great for accessible & interactive components, but they come completely 12 | unstyled. No point in rebuilding that, because I wouldn't be able to do it better 13 | than the Radix team. Many Chimera components are essentially Radix components that 14 | have been pre-styled a Chimera flavored Tailwind. 15 |
    16 |
    17 | This looks really similar to shadcn/ui. What is the difference? 18 | You would be right! I used many of the components from shadcn/ui as a starting 19 | point. The key differences are: 20 | - Chimera components are styled with a semantic color system. 21 | - With shadcn/ui, you copy and paste components 22 | into your library. Chimera is a library that you can import components from. 23 | - Small semantic differences. Shadcn renames components from Radix. Chimera uses 24 | the same naming conventions as Radix. 25 | 26 |
    27 | 28 |
    29 | Why did you choose to use a semantic color system?I wanted 30 | to create a library that would be easy to use for people who are new to design 31 | systems. I chose to use a semantic color system because it is easy to 32 | understand and use. It also allows for a lot of flexibility in how you want to 33 | use colors in your project. For example, you can use the same color for 34 | multiple components or you can use different colors for the same component. 35 |
    36 | 37 |
    38 | 39 | { 40 | "Seems like a pretty big package size and requires named exports. Will this bloat my app?" 41 | } 42 | 43 | Chimera is tree-shakeable. If you are using Next 12+ or a bundler that supports 44 | tree shaking, you should be fine. 45 |
    46 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "introduction": "Introduction", 3 | "install": "Installation", 4 | "theme": { 5 | "title": "Theme Generator", 6 | "theme": { 7 | "layout": "full", 8 | "pagination": true, 9 | "breadcrumb": true, 10 | "sidebar": true 11 | } 12 | }, 13 | "key-concepts": "Key Concepts", 14 | "components": "Components", 15 | "FAQ": { 16 | "title": "FAQ" 17 | }, 18 | 19 | "credits": "Credits", 20 | "index": { 21 | "title": "Home", 22 | "display": "hidden" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Accordion.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Accordion 3 | description: A vertically stacked set of interactive headings that each reveal an associated section of content. 4 | component: Accordion 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/accordion 7 | api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Accordion, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 24 | 25 | Is it accessible? 26 | 27 | Yes. It adheres to the WAI-ARIA design pattern. 28 | 29 | 30 | 31 | Is it unstyled? 32 | 33 | Yes. It's unstyled by default, giving you freedom over the look and 34 | feel. 35 | 36 | 37 | 38 | Can it be animated? 39 | 40 |
    41 | Yes! You can animate the Accordion with CSS or JavaScript. 42 |
    43 |     44 |     45 |     46 |     47 |     48 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/AlertDialog.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Alert Dialog 3 | description: A modal dialog that interrupts the user with important content and expects a response. 4 | component: AlertDialog 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/alert-dialog 7 | api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { AlertDialog, Button, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Are you absolutely sure? 27 | 28 | 29 | This action cannot be undone. This will permanently delete your 30 | account and remove your data from our servers. 31 | 32 |
    36 | 37 | 38 | 39 | 40 | 41 | 42 |
    43 |     44 |     45 |     46 |     47 |     48 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/AspectRatio.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Aspect Ratio 3 | description: Displays content within a desired ratio. 4 | component: AspectRatio 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/aspect-ratio 7 | api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { AspectRatio, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 |
    20 | 21 | Photo by Alvaro Pinot 27 | 28 |
    29 | 30 |     31 |     32 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Avatar.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Avatar 3 | description: An image element with a fallback for representing the user. 4 | component: Avatar 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/avatar 7 | api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Avatar, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 26 | 27 | CT 28 | 29 | 30 | 31 | 36 | 37 | JD 38 | 39 | 40 | 41 | PD 42 | 43 |
    44 | 45 |     46 |     47 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button 3 | description: It's just a button. 4 | component: Button 5 | --- 6 | 7 | import { Button, Showcase } from "@chimera-ui/components"; 8 | import ButtonDemo from "!!raw-loader!@/components/demo/ButtonDemo"; 9 | 10 | ## Basic Usage 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ## Variants 19 | 20 | 21 | 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
    35 |     36 |     37 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Checkbox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkbox 3 | description: A control that allows the user to toggle between checked and not checked. 4 | component: Checkbox 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/checkbox 7 | api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Checkbox, Showcase } from "@chimera-ui/components"; 12 | import { CheckIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Simple Usage 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 27 |
    28 |     29 |     30 | 31 | ## Subcomponent Usage 32 | 33 | 34 | 35 |
    36 | 37 | X 38 | 39 | 40 |
    41 |     42 |     43 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Collapsible.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collapsible 3 | description: An interactive component which expands/collapses a panel. 4 | component: Collapsible 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/collapsible 7 | api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Showcase } from "@chimera-ui/components"; 12 | import { CollapsibleDemo as CollapsibleDemoComponent } from "../../../components/demo/CollapsibleDemo"; 13 | import CollapsibleDemo from "!!raw-loader!../../../components/demo/CollapsibleDemo.tsx"; 14 | 15 | ## Usage 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/ContextMenu.mdx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Showcase, ContextMenu } from "@chimera-ui/components"; 3 | import { ContextMenuDemo as ContextMenuDemoComponent } from "@/components/demo/ContextMenuDemo"; 4 | import ContextMenuDemo from "!!raw-loader!@/components/demo/ContextMenuDemo.tsx"; 5 | 6 | ## Usage 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Copy.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Copy 3 | description: It's just a Copy. 4 | component: Copy 5 | --- 6 | 7 | import { Copy, Showcase } from "@chimera-ui/components"; 8 | 9 | ## Usage 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | ## Props 21 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Dialog.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dialog 3 | description: A modal dialog that interrupts the user with important content and expects a response. 4 | component: Dialog 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/dialog 7 | api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference 8 | --- 9 | 10 | import { Dialog, Button, Input, Showcase } from "@chimera-ui/components"; 11 | import { Cross2Icon } from "@radix-ui/react-icons"; 12 | 13 | ## Usage 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | Edit profile 28 | 29 | Make changes to your profile here. Click save when you're done. 30 | 31 |
    32 | 35 | 36 |
    37 |
    38 | 41 | 42 |
    43 | 44 | 45 |     46 |     47 |     48 |     49 |     50 | 51 | ## Extending Radix Anatomy 52 | 53 | ### Dialog.Confirm 54 | 55 | Chimera adds `Dialog.Confirm`, which is a `Dialog.Close`, except it positions a button in the bottom right corner. You can pass children to it, or use `` to use the default button. 56 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/DropdownMenu.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dropdown Menu 3 | description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. 4 | component: DropdownMenu 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/dropdown-menu 7 | api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Showcase, DropdownMenu, Button } from "@chimera-ui/components"; 12 | import { 13 | Cloud, 14 | CreditCard, 15 | Github, 16 | Keyboard, 17 | LifeBuoy, 18 | LogOut, 19 | Mail, 20 | MessageSquare, 21 | Plus, 22 | PlusCircle, 23 | Settings, 24 | User, 25 | UserPlus, 26 | Users, 27 | } from "lucide-react"; 28 | 29 | ## Usage 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | My Account 40 | 41 | 42 | 43 | 44 | Profile 45 | ⇧⌘P 46 | 47 | 48 | 49 | Billing 50 | ⌘B 51 | 52 | 53 | 54 | Settings 55 | ⌘S 56 | 57 | 58 | 59 | Keyboard shortcuts 60 | ⌘K 61 | 62 | 63 | 64 | 65 | 66 | 67 | Team 68 | 69 | 70 | 71 | 72 | Invite users 73 | 74 | 75 | 76 | 77 | 78 | Email 79 | 80 | 81 | 82 | Message 83 | 84 | 85 | 86 | 87 | More... 88 | 89 | 90 | 91 | 92 | 93 | 94 | New Team 95 | ⌘+T 96 | 97 | 98 | 99 | 100 | 101 | GitHub 102 | 103 | 104 | 105 | Support 106 | 107 | 108 | 109 | API 110 | 111 | 112 | 113 | 114 | Log out 115 | ⇧⌘Q 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Input 3 | description: It's just an input field with some styling. 4 | component: Input 5 | --- 6 | 7 | import React from "react"; 8 | import { Input, Label, Showcase } from "@chimera-ui/components"; 9 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 10 | 11 | ## Usage 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Label.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Label 3 | description: Renders an accessible label associated with controls. 4 | component: Label 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/label 7 | api: https://www.radix-ui.com/docs/primitives/components/label#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Checkbox, Showcase, Label } from "@chimera-ui/components"; 12 | import { CheckIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Accept terms and conditions 24 | 25 | 26 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Menubar.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Menubar 3 | description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. 4 | component: Menubar 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/menubar 7 | api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Menubar, Showcase } from "@chimera-ui/components"; 12 | 13 | ## Usage 14 | 15 | 16 | 17 | 18 | 19 | File 20 | 21 | 22 | New Tab ⌘T 23 | 24 | 25 | New Window ⌘N 26 | 27 | New Incognito Window 28 | 29 | 30 | Share 31 | 32 | Email link 33 | Messages 34 | Notes 35 | 36 | 37 | 38 | 39 | Print... ⌘P 40 | 41 | 42 | 43 | 44 | Edit 45 | 46 | 47 | Undo ⌘Z 48 | 49 | 50 | Redo ⇧⌘Z 51 | 52 | 53 | 54 | Find 55 | 56 | Search the web 57 | 58 | Find... 59 | Find Next 60 | Find Previous 61 | 62 | 63 | 64 | Cut 65 | Copy 66 | Paste 67 | 68 | 69 | 70 | View 71 | 72 | Always Show Bookmarks Bar 73 | 74 | Always Show Full URLs 75 | 76 | 77 | 78 | Reload ⌘R 79 | 80 | 81 | Force Reload ⇧⌘R 82 | 83 | 84 | Toggle Fullscreen 85 | 86 | Hide Sidebar 87 | 88 | 89 | 90 | Profiles 91 | 92 | 93 | Andy 94 | Benoit 95 | Luis 96 | 97 | 98 | Edit... 99 | 100 | Add Profile... 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/NavigationMenu.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Navigation Menu 3 | description: A collection of links for navigating websites. 4 | component: NavigationMenu 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/navigation-menu 7 | api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Showcase } from "@chimera-ui/components"; 12 | import { NavigationMenuDemo as NavigationMenuDemoComponent } from "../../../components/demo/NavigationMenuDemo"; 13 | import NavigationMenuDemo from "!!raw-loader!../../../components/demo/NavigationMenuDemo.tsx"; 14 | 15 | ## Usage 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Popover.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Popover 3 | description: Displays rich content in a portal, triggered by a button. 4 | component: Popover 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/popover 7 | api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Popover, Input, Showcase } from "@chimera-ui/components"; 12 | import { 13 | InfoCircledIcon, 14 | Cross2Icon, 15 | MixerHorizontalIcon, 16 | } from "@radix-ui/react-icons"; 17 | 18 | ## Usage 19 | 20 | 21 | 22 | }> 23 |
    24 |

    Dimensions

    25 |
    26 | 29 | 34 |
    35 |
    36 | 39 | 44 |
    45 |
    46 | 49 | 54 |
    55 |
    56 | 59 | 64 |
    65 |
    66 | 67 | 68 | 69 | 70 |     71 |     72 |     73 | 74 | ## Subcomponent Usage 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
    85 |

    86 | Dimensions 87 |

    88 |
    89 | 92 | 97 |
    98 |
    99 | 102 | 107 |
    108 |
    109 | 112 | 117 |
    118 |
    119 | 122 | 127 |
    128 |
    129 | 130 | 131 | 132 | 133 |     134 |     135 |     136 |     137 |     138 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Progress.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress 3 | description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. 4 | component: Progress 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/progress 7 | api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Progress, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/RadioGroup.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Radio Group 3 | description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. 4 | component: RadioGroup 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/radio-group 7 | api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { RadioGroup, Showcase, Label } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 |
    19 | 20 |
    21 | 22 | 23 | 24 | Default 25 |
    26 |
    27 | 28 | 29 | 30 | Comfortable 31 |
    32 |
    33 | 34 | 35 | 36 | Compact 37 |
    38 |     39 |
    40 |     41 |     42 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Select.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Select 3 | description: Displays a list of options for the user to pick from—triggered by a button. 4 | component: Select 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/select 7 | api: https://www.radix-ui.com/docs/primitives/components/select#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Select, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Fruits 25 | Apple 26 | Banana 27 | Blueberry 28 | Grapes 29 | Pineapple 30 | 31 | 32 | 33 | Vegetables 34 | Aubergine 35 | Broccoli 36 | 37 | Carrot 38 | 39 | Courgette 40 | Leek 41 | 42 | 43 | 44 | Meat 45 | Beef 46 | Chicken 47 | Lamb 48 | Pork 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Switch.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Switch 3 | description: A control that allows the user to toggle between checked and not checked. 4 | component: Switch 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/switch 7 | api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Switch, Label, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/Tabs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tabs 3 | description: A set of layered sections of content—known as tab panels—that are displayed one at a time. 4 | component: Tabs 5 | radix: 6 | link: https://www.radix-ui.com/docs/primitives/components/tabs 7 | api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference 8 | --- 9 | 10 | import React from "react"; 11 | import { Tabs, Input, Button, Label, Showcase } from "@chimera-ui/components"; 12 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 13 | 14 | ## Usage 15 | 16 | 17 | 18 | 19 | 20 | Account 21 | Password 22 | 23 | 24 | 25 | Make changes to your account here. Click save when you're done. 26 | 27 |
    28 |
    29 | 30 | 31 |
    32 |
    33 | 34 | 35 |
    36 |
    37 |
    38 | 39 |
    40 |     41 | 42 | 43 | Change your password here. After saving, you'll be logged out. 44 | 45 |
    46 |
    47 | 48 | 49 |
    50 |
    51 | 52 | 53 |
    54 |
    55 |
    56 | 57 |
    58 |     59 |     60 | 61 |     62 |     63 | -------------------------------------------------------------------------------- /apps/docs/pages/docs/components/TextArea.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: TextArea 3 | description: It's just an TextArea field with some styling. 4 | component: TextArea 5 | --- 6 | 7 | import React from "react"; 8 | import { TextArea, Label, Showcase } from "@chimera-ui/components"; 9 | import { InfoCircledIcon } from "@radix-ui/react-icons"; 10 | 11 | ## Usage 12 | 13 | 14 | 15 |
    16 | 17 |