A set of high-quality accessible React UI components with the built-in dark mode using Tailwind CSS. Pre-designed headless ui and radix-ui.
Home Page: https://www.vechaiui.com
License: MIT License
Hello. I followed the steps in the documentation and tried to install VechaiUI. However, when I run the app, the components aren't styled:
First, I created a blank project using npx create-react-app.
Then I installed the library using yarn:
yarn add @vechaiui/core @vechaiui/react @tailwindcss/formsAnd I'm using the very same code as shown in the documentation:
// ./src/App.js
import * as React from "react";
import { VechaiProvider, Button } from "@vechaiui/react";
function App() {
return (
<VechaiProvider>
<Button>Hello Vechai</Button>
</VechaiProvider>
);
}
export default App;And my tailwind.config.js is also copied from the docs:
module.exports = {
theme: {
mode: "jit",
purge: [
//
"./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}", // path to vechaiui
],
darkMode: "class",
// ...
},
// add VechaiUI plugin
plugins: [
require("@tailwindcss/forms"),
require("@vechaiui/core"),
// ...
],
};The buttons have the btn btn-md btn-outline classes, and everything seem to work, except the style... (sorry for this terrible English...)
Sorry if I misunderstood something in the docs.... I'm actually a beginner in React. I just can't find a solution for this one...
Hello. I'm using VechaiUI in my personal project and when I use the RadixUI Tabs, the styles aren't complete. I mean, it has the bottom border but except that, there's no style at all. However, the tabs's functions are all functional... Here's the screen shot:
I'm using the very same code as shown in the docs:
import { Button, Icon } from '@vechaiui/react'
import { BellIcon, UserCircleIcon, ShieldCheckIcon } from '@heroicons/react/outline'
import * as Tabs from "@radix-ui/react-tabs"
const cx = require('classnames');
export default function Navbar() {
const tabs = [
{
value: "tab1",
name: "Account",
content: "Tab one content",
icon: UserCircleIcon,
},
{
value: "tab2",
name: "Notifications",
content: "Tab second content",
icon: BellIcon,
},
{
value: "tab3",
name: "Security",
content: "Tab third content",
icon: ShieldCheckIcon,
},
];
return (
<div className="flex flex-wrap w-full p-8 space-x-4">
<Tabs.Root className="flex flex-col" defaultValue="tab1">
<Tabs.List
aria-label="tabs example"
className={cx(
"flex flex-row justify-start",
"border-b border-neutral-200 dark:border-neutral-700"
)}
>
{tabs.map((tab) => (
<Tabs.Trigger
key={tab.value}
value={tab.value}
className={cx(
"px-3 py-2 -mb-px text-sm text-center whitespace-nowrap cursor-base focus:outline-none",
"text-neutral-900 bg-transparent border-b-2 border-transparent",
"hover:border-neutral-300",
"selected:border-primary-500 selected:text-primary-600",
// dark
"dark:text-neutral-100",
"dark:hover:border-neutral-600",
"dark:selected:border-primary-500"
)}
>
{tab.name}
</Tabs.Trigger>
))}
</Tabs.List>
{tabs.map((tab) => (
<Tabs.Content
key={tab.value}
value={tab.value}
className="p-4 flex-grow-1"
>
{tab.content}
</Tabs.Content>
))}
</Tabs.Root>
</div>
)
}Thank you!
P.S.: The documentation used cx function to concat class names, but the function itself wasn't written in the example code and / or imported from extrenal libraries. It's pretty confusing to people at first still....
The Button Type does not allow a name or value prop when using TypeScript.
I am not sure if this is Vechai problem or an issue with the base React Type.
However, I am currently having to do this in a Remix.run site:
<Form method="post">
<input
name="foo"
type="hidden"
value="bar"
/>
<Button variant="solid">
No
</Button>
</Form>With the name and value props I could do this:
<Form method="post">
<Button name="foo" value="bar" variant="solid">
No
</Button>
</Form>There is no docs for these components:
"Dot", "Divider", "Toast"
Thanks for the great work.
Is there anyway to get rid of Vechai style appearing on style attribute ?
Thanks so much.
I followed the installation guide but still, it failed.
error:
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/index.js:1:33: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/alert.js" for import "AlertProps"
1 │ import { Alert as InternalAlert, AlertProps, AlertCloseButton, AlertCloseButtonProps } from "./alert";
╵ ~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/index.js:1:63: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/alert.js" for import "AlertCloseButtonProps"
1 │ import { Alert as InternalAlert, AlertProps, AlertCloseButton, AlertCloseButtonProps } from "./alert";
╵ ~~~~~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/index.js:1:35: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/avatar.js" for import "AvatarProps"
1 │ import { Avatar as InternalAvatar, AvatarProps } from "./avatar";
╵ ~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/index.js:2:22: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/avatar-group.js" for import "AvatarGroupProps"
2 │ import { AvatarGroup, AvatarGroupProps } from "./avatar-group";
╵ ~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/index.js:1:43: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/breadcrumb.js" for import "BreadcrumbProps"
1 │ import { Breadcrumb as InternalBreadcrumb, BreadcrumbProps, BreadcrumbItem, BreadcrumbItemProps, Brea...
╵ ~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/index.js:1:76: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/breadcrumb.js" for import "BreadcrumbItemProps"
1 │ ...crumb, BreadcrumbProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, ...
╵ ~~~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/index.js:1:113: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/breadcrumb.js" for import "BreadcrumbLinkProps"
1 │ ...m, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbSeparator, BreadcrumbSepara...
╵ ~~~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/index.js:1:155: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/breadcrumb.js" for import "BreadcrumbSeparatorProps"
1 │ ...dcrumbLink, BreadcrumbLinkProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from "./breadcrumb";
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/button/dist/esm/index.js:1:35: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/button/dist/esm/button.js" for import "ButtonProps"
1 │ import { Button as InternalButton, ButtonProps } from "./button";
╵ ~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/button/dist/esm/index.js:2:22: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/button/dist/esm/button-group.js" for import "ButtonGroupProps"
2 │ import { ButtonGroup, ButtonGroupProps } from "./button-group";
╵ ~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/button/dist/esm/index.js:3:21: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/button/dist/esm/icon-button.js" for import "IconButtonProps"
3 │ import { IconButton, IconButtonProps } from "./icon-button";
╵ ~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input/index.js:1:33: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input/input.js" for import "InputProps"
1 │ import { Input as InternalInput, InputProps } from "./input";
╵ ~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input/index.js:2:21: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input-group/index.js" for import "InputGroupProps"
2 │ import { InputGroup, InputGroupProps } from "../input-group";
╵ ~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input/index.js:3:42: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input-addon/index.js" for import "InputAddonProps"
3 │ import { InputLeftAddon, InputRightAddon, InputAddonProps } from "../input-addon";
╵ ~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input/index.js:4:46: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/forms/dist/esm/input-element/index.js" for import "InputElementProps"
4 │ import { InputLeftElement, InputRightElement, InputElementProps } from "../input-element";
╵ ~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/checkbox/dist/esm/index.js:1:39: error: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/checkbox/dist/esm/checkbox.js" for import "CheckboxProps"
1 │ import { Checkbox as InternalCheckbox, CheckboxProps } from "./checkbox";
╵ ~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/checkbox/dist/esm/index.js:2:24: error: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/checkbox/dist/esm/checkbox-group.js" for import "CheckboxGroupProps"
2 │ import { CheckboxGroup, CheckboxGroupProps } from "./checkbox-group";
╵ ~~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/radio/dist/esm/index.js:1:33: error: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/radio/dist/esm/radio.js" for import "RadioProps"
1 │ import { Radio as InternalRadio, RadioProps } from "./radio";
╵ ~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/radio/dist/esm/index.js:2:21: error: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vechaiui/radio/dist/esm/radio-group.js" for import "RadioGroupProps"
2 │ import { RadioGroup, RadioGroupProps } from "./radio-group";
╵ ~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/tag/dist/esm/index.js:1:29: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/tag/dist/esm/tag.js" for import "TagProps"
1 │ import { Tag as InternalTag, TagProps, TagCloseButton, TagCloseButtonProps, TagLabel, TagLabelProps }...
╵ ~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/tag/dist/esm/index.js:1:55: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/tag/dist/esm/tag.js" for import "TagCloseButtonProps"
1 │ ...s InternalTag, TagProps, TagCloseButton, TagCloseButtonProps, TagLabel, TagLabelProps } from "./tag";
╵ ~~~~~~~~~~~~~~~~~~~
> node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/tag/dist/esm/index.js:1:86: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/tag/dist/esm/tag.js" for import "TagLabelProps"
1 │ ...s InternalTag, TagProps, TagCloseButton, TagCloseButtonProps, TagLabel, TagLabelProps } from "./tag";
╵ ~~~~~~~~~~~~~
12:13:27 PM [vite] error while updating dependencies:
Error: Build failed with 22 errors:
node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/index.js:1:33: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/alert.js" for import "AlertProps"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/index.js:1:63: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/alert/dist/esm/alert.js" for import "AlertCloseButtonProps"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/index.js:1:35: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/avatar.js" for import "AvatarProps"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/index.js:2:22: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/avatar/dist/esm/avatar-group.js" for import "AvatarGroupProps"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/index.js:1:43: error: No matching export in "node_modules/.pnpm/@[email protected][email protected]/node_modules/@vechaiui/breadcrumb/dist/esm/breadcrumb.js" for import "BreadcrumbProps"
...
at failureErrorWithLog (/home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1449:15)
at /home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1131:28
at runOnEndCallbacks (/home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:921:63)
at buildResponseToResult (/home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1129:7)
at /home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1236:14
at /home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:609:9
at handleIncomingPacket (/home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:706:9)
at Socket.readFromStdout (/home/snxk/Projects/react-playground/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:576:7)
at Socket.emit (node:events:394:28)
at Socket.emit (node:domain:470:12)
Hi I used the Button component and It didn't apply style on it.
_app.tsx
import React from 'react'
import type { AppProps } from 'next/app'
import { VechaiProvider, Button } from '@vechaiui/react'
export default function App({ Component, pageProps }: AppProps) {
return (
<VechaiProvider>
<Button>e</Button>
<Component {...pageProps} />
</VechaiProvider>
)
}tailwind.config.ts
export default {
mode: 'jit',
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'), require('@vechaiui/core')],
}
Wrong icons in success and error notification and message.
Tick icon must be used in "Success" and Cross icon in "Error"
Code
Pakage.josn
REPOSITORY
Hi I loved this library but sadly the styles don't seem to work.
here is my config
module.exports = {
mode: 'jit',
purge: [
"./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./stories/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/forms"), require("@vechaiui/core")],
};
Page: https://www.vechaiui.com/form-control
Like: FormHelperText
Color: red
Hi. As in issue #22, I tried to install tailwindcss library. However, when I run the project, it gives me an error saying that tailwindcss requires PostCSS 8. But PostCSS 8 doesn't support React, yet: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users#create-react-app
BTW, I have installed craco and replaced the scripts in package.json to craco as in the tailwindcss offical docs. Are there any workarounds for this? Thanks!
My package.json:
{
"name": "stcomix",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.2.0",
"@tailwindcss/forms": "^0.3.3",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@vechaiui/core": "^0.3.7",
"@vechaiui/react": "^0.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
}
}
When a menu item is really long, the text overflows due to the fact that the height is pre-defined.
h-8 {
height: 2rem;
}
Suggestion
Change the height to min-height. However this may have effect on other properties.
h-8 {
min-height: 2rem;
}
Thanks for a fantastic ui kit guys! Just what I needed.
I might get around to implementing this but thought I'd flag this now.
I can't see anything in the docs for this, although I did see it in the Link component.
Is it possible to add graph components to the library, or is there already some work being done on this?
Example of different types: https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/stylish/#/charts/line-chart
I just discovered verchai UI and it was the exact library I was looking for but i got this error during the compilation
The font-mono class does not exist. If font-mono is a custom class, make sure it is defined within a @layer directive.
Is there a list of the available icons in the Icon package? The docs for that component only show four status icons, but the source file exports eight, and the 'gift' icon which shows up throughout the docs is not one of them.
i forked the repo to make improvements and fixe some bugs i've encountered but when i run yarn boot, the command line exit with code 417. as yarn boot is the combination of yarn prestart and yarn build, i've tried to run them separately but the same problem occurs with yarn build.
This error can be reproduced by downloading or cloning the repo and run yarn boot
[email protected] and configure it according to the docs@vechaiui/core plugin to tailwind.config.js
Note that this is an issue only with the VSCode plugin. Everything else seems to be working as expected from what I can tell.
Downgrade tailwindcss to v3.0.23 or earlier.
I created a new color to my project inside tailwind.config.js you can see that config below.
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./layouts/**/*.{js,ts,jsx,tsx}',
'./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}', // path to vechaiui
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
error: colors.error,
},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@vechaiui/core')({
colors: ['error'],
}),
],
}But I got that error when I'm trying to run it.
<css input> The `bg-error-50` class does not exist. If `bg-error-50` is a custom class, make sure it is defined within a `@layer` directive.
(node:3128) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\makow\Documents\Projects\ee\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[1]!C:\Users\makow\Documents\Projects\ee\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[2]!C:\Users\makow\Documents\Projects\ee\styles\globals.css': No serializer registered for SyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SyntaxError
wait - compiling /_error...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./styles/globals.css
SyntaxError
Hello,
I just saw the vechaiui project and i loved it so much because of it's simplesty so I wanted to contribute by rebuilding some thired party component like toast so is there any kind of docs guid for contribution?
index.spec.tsx
import { render, screen } from '@testing-library/react'
import Home from '.'
describe('Home', () => {
it('should render component', () => {
render(<Home />)
expect(screen.getByText('RIGTCH')).toBeInTheDocument()
})
})error message
Test suite failed to run
TypeError: React.forwardRef is not a function
> 1 | import { Button } from '@vechaiui/react'
| ^
2 |
3 | export default function Index() {
4 | return (
at Object.<anonymous> (node_modules/@vechaiui/icon/src/core.tsx:5:41)
at Object.<anonymous> (node_modules/@vechaiui/icon/src/index.ts:1:1)
at Object.<anonymous> (node_modules/@vechaiui/alert/src/alert.tsx:2:1)
at Object.<anonymous> (node_modules/@vechaiui/alert/src/index.ts:3:1)
at Object.<anonymous> (node_modules/@vechaiui/react/src/index.ts:1:1)
at Object.<anonymous> (app/routes/index.tsx:1:1)
at Object.<anonymous> (app/routes/index.spec.tsx:3:1)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)
I also tried to wrap Home component into VechaiProvider and got same result
Hey there, when using vechaiui with remix.run I am getting the following error:
✘ [ERROR] No matching export in "node_modules/@vechaiui/react/dist/esm/index.js" for import "VenchaiProvider"
app/components/Providers.tsx:2:9:
2 │ import { VenchaiProvider } from "@vechaiui/react";
╵ ~~~~~~~~~~~~~~~
Build failed with 1 error:
app/components/Providers.tsx:2:9: ERROR: No matching export in "node_modules/@vechaiui/react/dist/esm/index.js" for import "VenchaiProvider"
💿 Rebuilt in 64ms
tailwind.config.js
module.exports = {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
mode: "jit",
purge: [
// ...
"./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}", // path to vechaiui
],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"),
require("@vechaiui/core"),
],
};I set up a project with the following command
npx create-remix --template remix-run/blues-stack
Website https://www.vechaiui.com/ doesn't open.
I received the following error...
Warning: Received `false` for a non-boolean attribute `invalid`.
If you want to write it to the DOM, pass a string instead: invalid="false" or invalid={value.toString()}.
If you used to conditionally omit it with invalid={condition && value}, pass invalid={condition ? value : undefined} instead.
...when applying this invalid prop:
<Input invalid={hasError} /> // hasError === falseI suppose the component should turn this boolean into a 'true' or 'false' string.
Edit: a workaround is using the aria-invalid prop as it is also gets styled properly:
<Input aria-invalid={hasError} /> // hasError === falseThere should be a data-cy (or data-test) custom property added to the components so they can be targetted without having to rely on their ids.
Hello.
I'm interesting to use vechaiui. But when i've added a vechai configuration in tailwind config
the errors appears when running the app. Does vechai UI support React v18?
How to solve this?
package.json
my config tailwind
module.exports = {
content: [
"./*.html",
"./src/**/*.{js,jsx,ts,tsx}",
"./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}",
],
plugins: [],
};// app.tsx
import { BrowserRouter } from "react-router-dom";
import Navigation from "routes/Navigation";
import { QueryClient, QueryClientProvider } from "react-query";
import { VechaiProvider } from "@vechaiui/react";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: false,
},
},
});
const App = () => {
return (
<BrowserRouter basename="/">
<VechaiProvider>
<QueryClientProvider client={queryClient}>
<Navigation />
</QueryClientProvider>
</VechaiProvider>
</BrowserRouter>
);
};
export default App;// main.tsx
import React from "react";
import { createRoot } from "react-dom/client";
// tailwind styles
import "styles/index.css";
import App from "./App";
type RootElement = Element | DocumentFragment;
const rootElement = document.getElementById("root");
const renderRoot = createRoot(rootElement as RootElement);
renderRoot.render(
<React.Fragment>
<App />
</React.Fragment>,
);Classes for disabled: variant are not generated when vechaiui plugin is used in tailwind.
I think the problem is with the onig.wasm.
from [email protected] the file onigasm.wasm has been renamed to onig.wasm.
Current deploy
Local development
Maybe the problem can be solved here:
Apologies if this is the wrong place to ask, but I couldn't find any documentation to refer to any of the theme in other components. Is this possible?
Hello! I love your library very much. However, I didn't find a component like a navbar for navigation... Is there a plan for adding it? Thanks a lot!!
Have warnings using with react v18.
Even I don`t use Toast component.
Warning comes from here:
Toast.tsx#L35
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.