Start by creating a new React project using vite. Select the React + TypeScript template:
Replace everything in src/index.css with the following:
@import "tailwindcss";
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
Add the following code to the vite.config.ts so your app can resolve paths without error:
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
The fastest way. It writes each component plus everything that component imports, then installs the packages they need.
npx @left4code/cosmic-ui-cli@latest init
Then add components. Dependencies between components are resolved for you, so this also writes button, frame, portal and presence.
npx @left4code/cosmic-ui-cli@latest add dialog
Run npx @left4code/cosmic-ui-cli@latest list to see everything available. The steps below are the manual alternative.
You can now start adding components to your project.
import { Button } from "@/components/ui/button";
function App() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button variant="success">Button</Button>
</div>
)
}
export default App