https://github.com/safe-stack/safe-shadcn
https://github.com/safe-stack/safe-shadcn
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/safe-stack/safe-shadcn
- Owner: SAFE-Stack
- License: mit
- Created: 2025-05-02T17:14:50.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-05-12T14:11:19.000Z (9 months ago)
- Last Synced: 2025-06-05T14:43:29.068Z (8 months ago)
- Language: F#
- Size: 373 KB
- Stars: 3
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SAFE Template with ShadCN UI Components
This demo is used to showcase a full-stack web application using the [SAFE Stack](https://safe-stack.github.io/) enhanced with [ShadCN UI](https://ui.shadcn.com/) components through the Feliz.Shadcn library. You can find a live version on [GitHub pages](https://safe-stack.github.io/safe-shadcn/)
## ShadCN UI Integration
This template integrates ShadCN UI components with F# through the Feliz.Shadcn library, allowing you to:
- Use beautifully designed, accessible UI components
- Maintain type-safety with F# bindings
- Customize components through TailwindCSS
- Seamlessly work with the Elmish architecture
The components are located in `src/Client/components/ui/` and can be used in your F# code through the Feliz.Shadcn bindings. This integration provides a modern, responsive UI while maintaining the functional programming paradigm of F#.
### Example Usage with Feliz
```fsharp
// Import the required namespaces
open Feliz
open Feliz.Shadcn
// Using ShadCN components in F#
Shadcn.button [
button.size.lg
prop.className "mb-10"
prop.children [ Html.text "Generate User Persona" ]
prop.onClick (fun _ -> dispatch GeneratePersona)
]
// Using ShadCN card with other components
Shadcn.card [
prop.className "w-full max-w-sm shadow-lg"
prop.children [
Shadcn.cardHeader [
Shadcn.avatar [
Shadcn.avatarImage [ prop.src "image.jpg" ]
Shadcn.avatarFallback [ prop.text "User" ]
]
]
Shadcn.cardContent [ ... ]
]
]
```
> Note: This example focuses exclusively on the client-side implementation. The server and shared components are included as part of the SAFE stack structure but contain no logic.
## Install pre-requisites
You'll need to install the following pre-requisites in order to build SAFE applications
* [.NET SDK](https://www.microsoft.com/net/download) 8.0 or higher
* [Node 18](https://nodejs.org/en/download/) or higher
* [NPM 9](https://www.npmjs.com/package/npm) or higher
## Starting the application
To concurrently run the server and the client components in watch mode use the following command:
```bash
dotnet tool restore;
dotnet run
```
Then open `http://localhost:8080` in your browser.
The build project in root directory contains a couple of different build targets. You can specify them after `--` (target name is case-insensitive).