├── .gitignore
├── .prettierrc
├── .vscode
├── extensions.json
└── launch.json
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
├── favicon.svg
└── fonts
│ └── geist-font
│ ├── fonts
│ ├── GeistMonoVariableVF.ttf
│ ├── GeistMonoVariableVF.woff2
│ ├── GeistVariableVF.ttf
│ ├── GeistVariableVF.woff2
│ └── LICENSE.TXT
│ └── style.css
├── src
├── css
│ └── app.css
├── env.d.ts
└── pages
│ └── index.astro
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist/
3 | # generated types
4 | .astro/
5 |
6 | # dependencies
7 | node_modules/
8 |
9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 |
15 |
16 | # environment variables
17 | .env
18 | .env.production
19 |
20 | # macOS-specific files
21 | .DS_Store
22 |
23 | # jetbrains setting folder
24 | .idea/
25 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
3 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["astro-build.astro-vscode"],
3 | "unwantedRecommendations": []
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "command": "./node_modules/.bin/astro dev",
6 | "name": "Development server",
7 | "request": "launch",
8 | "type": "node-terminal"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Franken UI - Template Astro
2 |
3 | [](https://stackblitz.com/github/franken-ui/template-astro)
4 | [](https://codesandbox.io/p/sandbox/github/franken-ui/template-astro)
5 |
6 | ## 🧞 Commands
7 |
8 | All commands are run from the root of the project, from a terminal:
9 |
10 | | Command | Action |
11 | | :------------------------ | :----------------------------------------------- |
12 | | `npm install` | Installs dependencies |
13 | | `npm run dev` | Starts local dev server at `localhost:4321` |
14 | | `npm run build` | Build your production site to `./dist/` |
15 | | `npm run preview` | Preview your build locally, before deploying |
16 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
17 | | `npm run astro -- --help` | Get help using the Astro CLI |
18 |
19 | ## 👀 Want to learn more?
20 |
21 | Feel free to check [our documentation](https://next.franken-ui.dev).
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "astro/config";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import franken from "franken-ui/plugin-vite";
4 |
5 | // https://astro.build/config
6 | export default defineConfig({
7 | vite: {
8 | plugins: [
9 | tailwindcss(),
10 | franken({
11 | preflight: false,
12 | layer: true,
13 | layerExceptions: ["chart"],
14 | }),
15 | ],
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-astro",
3 | "type": "module",
4 | "version": "0.0.1",
5 | "scripts": {
6 | "dev": "astro dev",
7 | "start": "astro dev",
8 | "build": "astro check && astro build",
9 | "preview": "astro preview",
10 | "astro": "astro"
11 | },
12 | "dependencies": {
13 | "@astrojs/check": "^0.9.4",
14 | "@tailwindcss/vite": "^4.0.15",
15 | "astro": "^5.7.4",
16 | "franken-ui": "^2.1.0-next.4",
17 | "postcss": "^8.4.40",
18 | "prettier": "^3.3.3",
19 | "prettier-plugin-astro": "^0.14.1",
20 | "prettier-plugin-tailwindcss": "^0.6.5",
21 | "tailwindcss": "^4.0.15",
22 | "typescript": "^5.5.4"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/public/fonts/geist-font/fonts/GeistMonoVariableVF.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/franken-ui/template-astro/ae2805e51f241b0b342ed1f67fc18bba853f44da/public/fonts/geist-font/fonts/GeistMonoVariableVF.ttf
--------------------------------------------------------------------------------
/public/fonts/geist-font/fonts/GeistMonoVariableVF.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/franken-ui/template-astro/ae2805e51f241b0b342ed1f67fc18bba853f44da/public/fonts/geist-font/fonts/GeistMonoVariableVF.woff2
--------------------------------------------------------------------------------
/public/fonts/geist-font/fonts/GeistVariableVF.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/franken-ui/template-astro/ae2805e51f241b0b342ed1f67fc18bba853f44da/public/fonts/geist-font/fonts/GeistVariableVF.ttf
--------------------------------------------------------------------------------
/public/fonts/geist-font/fonts/GeistVariableVF.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/franken-ui/template-astro/ae2805e51f241b0b342ed1f67fc18bba853f44da/public/fonts/geist-font/fonts/GeistVariableVF.woff2
--------------------------------------------------------------------------------
/public/fonts/geist-font/fonts/LICENSE.TXT:
--------------------------------------------------------------------------------
1 | Geist Sans and Geist Mono Font
2 | (C) 2023 Vercel, made in collaboration with basement.studio
3 |
4 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
5 | This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
6 |
7 | -----------------------------------------------------------
8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
9 | -----------------------------------------------------------
10 |
11 | PREAMBLE
12 | The goals of the Open Font License (OFL) are to stimulate worldwide
13 | development of collaborative font projects, to support the font creation
14 | efforts of academic and linguistic communities, and to provide a free and
15 | open framework in which fonts may be shared and improved in partnership
16 | with others.
17 |
18 | The OFL allows the licensed fonts to be used, studied, modified and
19 | redistributed freely as long as they are not sold by themselves. The
20 | fonts, including any derivative works, can be bundled, embedded,
21 | redistributed and/or sold with any software provided that any reserved
22 | names are not used by derivative works. The fonts and derivatives,
23 | however, cannot be released under any other type of license. The
24 | requirement for fonts to remain under this license does not apply
25 | to any document created using the fonts or their derivatives.
26 |
27 | DEFINITIONS
28 | "Font Software" refers to the set of files released by the Copyright
29 | Holder(s) under this license and clearly marked as such. This may
30 | include source files, build scripts and documentation.
31 |
32 | "Reserved Font Name" refers to any names specified as such after the
33 | copyright statement(s).
34 |
35 | "Original Version" refers to the collection of Font Software components as
36 | distributed by the Copyright Holder(s).
37 |
38 | "Modified Version" refers to any derivative made by adding to, deleting,
39 | or substituting -- in part or in whole -- any of the components of the
40 | Original Version, by changing formats or by porting the Font Software to a
41 | new environment.
42 |
43 | "Author" refers to any designer, engineer, programmer, technical
44 | writer or other person who contributed to the Font Software.
45 |
46 | PERMISSION AND CONDITIONS
47 | Permission is hereby granted, free of charge, to any person obtaining
48 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
49 | redistribute, and sell modified and unmodified copies of the Font
50 | Software, subject to the following conditions:
51 |
52 | 1) Neither the Font Software nor any of its individual components,
53 | in Original or Modified Versions, may be sold by itself.
54 |
55 | 2) Original or Modified Versions of the Font Software may be bundled,
56 | redistributed and/or sold with any software, provided that each copy
57 | contains the above copyright notice and this license. These can be
58 | included either as stand-alone text files, human-readable headers or
59 | in the appropriate machine-readable metadata fields within text or
60 | binary files as long as those fields can be easily viewed by the user.
61 |
62 | 3) No Modified Version of the Font Software may use the Reserved Font
63 | Name(s) unless explicit written permission is granted by the corresponding
64 | Copyright Holder. This restriction only applies to the primary font name as
65 | presented to the users.
66 |
67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
68 | Software shall not be used to promote, endorse or advertise any
69 | Modified Version, except to acknowledge the contribution(s) of the
70 | Copyright Holder(s) and the Author(s) or with their explicit written
71 | permission.
72 |
73 | 5) The Font Software, modified or unmodified, in part or in whole,
74 | must be distributed entirely under this license, and must not be
75 | distributed under any other license. The requirement for fonts to
76 | remain under this license does not apply to any document created
77 | using the Font Software.
78 |
79 | TERMINATION
80 | This license becomes null and void if any of the above conditions are
81 | not met.
82 |
83 | DISCLAIMER
84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
92 | OTHER DEALINGS IN THE FONT SOFTWARE.
93 |
--------------------------------------------------------------------------------
/public/fonts/geist-font/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Geist Sans";
3 | src:
4 | url("/fonts/geist-font/fonts/GeistVariableVF.woff2") format("woff2"),
5 | url("/fonts/geist-font/fonts/GeistVariableVF.ttf") format("truetype");
6 | font-display: swap;
7 | }
8 | @font-face {
9 | font-family: "Geist Mono";
10 | src:
11 | url("/fonts/geist-font/fonts/GeistMonoVariableVF.woff2") format("woff2"),
12 | url("/fonts/geist-font/fonts/GeistMonoVariableVF.ttf") format("truetype");
13 | font-display: swap;
14 | }
15 |
--------------------------------------------------------------------------------
/src/css/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 |
3 | @theme {
4 | --color-background: hsl(var(--background));
5 | --color-foreground: hsl(var(--foreground));
6 | --color-muted: hsl(var(--muted));
7 | --color-muted-foreground: hsl(var(--muted-foreground));
8 | --color-card: hsl(var(--card));
9 | --color-card-foreground: hsl(var(--card-foreground));
10 | --color-popover: hsl(var(--popover));
11 | --color-popover-foreground: hsl(var(--popover-foreground));
12 | --color-border: hsl(var(--border));
13 | --color-input: hsl(var(--input));
14 | --color-primary: hsl(var(--primary));
15 | --color-primary-foreground: hsl(var(--primary-foreground));
16 | --color-secondary: hsl(var(--secondary));
17 | --color-secondary-foreground: hsl(var(--secondary-foreground));
18 | --color-accent: hsl(var(--accent));
19 | --color-accent-foreground: hsl(var(--accent-foreground));
20 | --color-destructive: hsl(var(--destructive));
21 | --color-destructive-foreground: hsl(var(--destructive-foreground));
22 | --color-ring: hsl(var(--ring));
23 |
24 | --font-geist-sans: Geist Sans, ui-sans-serif, system-ui, sans-serif,
25 | "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
26 | --font-geist-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco,
27 | Consolas, "Liberation Mono", "Courier New", monospace;
28 | }
29 |
--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import "css/app.css";
3 | import "franken-ui/css/franken-ui.css";
4 | import core from "franken-ui/js/core.iife?url";
5 | import icon from "franken-ui/js/icon.iife?url";
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Astro
16 |
23 |
30 |
31 |
32 |
55 |
56 |
57 |
58 |
59 |
60 |