https://github.com/liascode/shadcn-preact
shadcn, but for preact
https://github.com/liascode/shadcn-preact
port preact preactjs shadcn shadcn-ui
Last synced: 3 months ago
JSON representation
shadcn, but for preact
- Host: GitHub
- URL: https://github.com/liascode/shadcn-preact
- Owner: LiasCode
- License: mit
- Created: 2025-02-09T07:45:40.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-28T09:40:38.000Z (3 months ago)
- Last Synced: 2025-02-28T16:35:18.570Z (3 months ago)
- Topics: port, preact, preactjs, shadcn, shadcn-ui
- Language: TypeScript
- Homepage: https://shadcn-preact.onrender.com/
- Size: 662 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `shadcn/ui` port for PREACT
An unofficial, Preact port of shadcn/ui .
This is **NOT** a component library. It’s a collection of re-usable components that you
can copy and paste into your apps.
**What do you mean by not a component library?**
I mean you do not install it as a dependency. It is not available or distributed via npm. I have no
plans to publish it as an npm package (for now).
Pick the components you need. Copy and paste the code into your project and customize to your needs.
The code is yours.
_Use this as a reference to build your own component libraries._
**Why if Preact is compatible with React?**
Shadcn/ui is built on top of Radix UI and Tailwind CSS. Radix is an excellent component library,
but it is a heavy dependency and I have tried to move it to Preact for better
integration and a build with minimal external dependencies.
### Installation Guide
**VITE:**
**1- Create project**
Start by creating a new Preact project using vite:
```bash
bun create vite@latest
```
**2- Add Tailwind and its configuration**
> For now only suport tailwindcss 3
> In the future will support tailwindcss 4
Install tailwindcss and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
```bash
bun add -D [email protected] postcss autoprefixer
```
Add this import header in your main css file, `src/index.css` in our case:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
```
Configure the tailwind template paths in `tailwind.config.js`:
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
};
```
Configure the postcss file `postcss.config.js`:
```js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
**3- Edit tsconfig.json file**
```json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"],
"@ui/*": ["./src/components/ui/*"]
}
}
}
```
**4- Update vite.config.ts**
```bash
bun add -D @types/node
```
```js
import { resolve } from "node:path";
import preact from "@preact/preset-vite";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
server: {
host: true,
},
resolve: {
alias: {
"@ui": resolve(resolve(__dirname), "./src/components/ui/"),
"@": resolve(resolve(__dirname), "./src/"),
},
},
define: {
"process.env.IS_PREACT": JSON.stringify("true"),
},
});
```
### Add UI components
For now this guide its for the installation of all components at once.
**1- Install all components dependencies:**
```bash
bun add class-variance-authority clsx cmdk date-fns dayjs embla-carousel-react input-otp lucide-preact react-day-picker react-hot-toast recharts tailwind-merge tailwindcss-animate vaul @floating-ui/react-dom
```
**2- Adding components:**
Copy the folder of this repo `src/components/ui` into your ui path
If you dont change the config guide should be in `src/components/ui`
**3- Adding custom css vars:**
Add this import header in your main css file, `src/index.css` in our case:
```css
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
```
**4- Updating `tailwind.config.js`**
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode: ["class"],
theme: {
extend: {
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
chart: {
1: "hsl(var(--chart-1))",
2: "hsl(var(--chart-2))",
3: "hsl(var(--chart-3))",
4: "hsl(var(--chart-4))",
5: "hsl(var(--chart-5))",
},
},
fontSize: {},
borderRadius: {
"2xl": "calc(var(--radius) + 4px)",
xl: "calc(var(--radius) + 2px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {},
},
},
plugins: [require("tailwindcss-animate")],
};
```
**5- Done**