Fable/Feliz types for the Shadcn UI component library.
Read the documentation for more information.
https://ui.shadcn.com/docs/installation/vite
dotnet add package Feliz.Shadcnopen Feliz.Shadcn
Shadcn.button [
prop.text "Click me"
prop.onClick (fun _ -> Browser.Dom.window.alert "Hello, shadcn/ui!")
]Integrating Feliz.Shadcn into your Elmish Land application is straightforward. The following example demonstrates how to set up a basic Elmish Land app that incorporates Shadcn components.
mkdir FelizShadcnIntro
cd FelizShadcnIntro
dotnet new tool-manifest
dotnet tool install elmish-land
dotnet elmish-land initnpm install tailwindcss @tailwindcss/viteAdd the @tailwindcss/vite plugin and shadcn's component alias to your Vite configuration vite.config.js:
import { defineConfig } from 'vite'
// highlight-start
import path from "path"
import tailwindcss from '@tailwindcss/vite'
// highlight-end
export default defineConfig({
// highlight-start
plugins: [
tailwindcss(),
],
// highlight-end
build: {
outDir: "dist"
},
// highlight-start
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
// highlight-end
})Create a file named styles.css in the root folder of your project and add an @import for Tailwind CSS.
@import "tailwindcss";Add a link to your styles.css in the <head> section of your index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
// highlight-start
<link href="/styles.css" rel="stylesheet">
// highlight-end
<title>TailwindElmishLand</title>
</head>
<body>
<div id="app"></div>
<script type="module" src=".elmish-land/App/App.fs.js"></script>
</body>
</html>Create a file named tsconfig.json in the root folder of your project and add the following:
{
"files": [],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
}
}npx shadcn@latest initYou will be asked a few questions to configure components.json.
dotnet add package Feliz.ShadcnYou can now start adding components to your project.
npx shadcn@latest add buttonThe command above will add the Button component to your project. You can then use it in your pages like this:
module FelizShadcnIntro.Pages.Page
open Feliz
open ElmishLand
open FelizShadcnIntro.Shared
open FelizShadcnIntro.Pages
// highlight-start
open Feliz.Shadcn
// highlight-end
type Model = unit
type Msg =
| LayoutMsg of Layout.Msg
let init () =
(),
Command.none
let update (msg: Msg) (model: Model) =
match msg with
| LayoutMsg _ -> model, Command.none
let view (_model: Model) (_dispatch: Msg -> unit) =
// highlight-start
Html.div [
Shadcn.button [
prop.text "Click me"
prop.onClick (fun _ -> Browser.Dom.window.alert "Hello, shadcn/ui!")
]
]
// highlight-end
let page (_shared: SharedModel) (_route: HomeRoute) =
Page.from init update view () LayoutMsgRun:
dotnet elmish-land serverto start your application.