An easy way to use Shoelace.style within your Astro Project!
Install the integration automatically using the Astro CLI:
pnpm astro add @matthiesenxyz/astrolacenpx astro add @matthiesenxyz/astrolaceyarn astro add @matthiesenxyz/astrolaceOr install it manually:
- Install the required dependencies
pnpm add @matthiesenxyz/astrolacenpm install @matthiesenxyz/astrolaceyarn add @matthiesenxyz/astrolace- Add the integration to your astro config
+import astrolace from "@matthiesenxyz/astrolace";
export default defineConfig({
integrations: [
+ astrolace(),
],
});- Add the
<ShoelaceHeader>Element to your Layout's<head>
---
import { ShoelaceHeader } from "astrolace:components/header";
---
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<ShoelaceHeader />
</head>
</html>- Use any of the exported components!
---
import {
Alert, AnimatedImage, Avatar, Badge, Breadcrumb, BreadcrumbItem,
ButtonGroup, Button, Card, Carousel, CarouselItem, Checkbox,
ColorPicker, CopyButton, Details, Divider, Dialog, Drawer,
Dropdown, FormatBytes, FormatDate, FormatNumber, Icon, IconButton,
ImageComparer, Include, Input, Menu, MenuItem, MenuLabel, MutationObserver,
Option, Popup, ProgressBar, ProgressRing, QrCode, Radio, RadioButton,
RadioGroup, Range, Rating, RelativeTime, ResizeObserver, Select,
Skeleton, Spinner, SplitPanel, Switch, Tab, TabGroup, TabPanel,
Tag, Textarea, Tooltip, Tree, TreeItem, VisuallyHidden
} from "astrolace:components";
----
registerIconLibrary- Allows the user to register extra icons (example shown is to register the default icon library(Bootstrap Icons))
---
import { ShoelaceHeader } from "astrolace:components/header";
---
<html>
<head>
<ShoelaceHeader />
<script>
// `registerIconLibrary` function from Shoelace.style
import { registerIconLibrary } from "astrolace:tools";
// Register the default icon library
registerIconLibrary('default', {
resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}.svg`
});
</script>
</head>
</html>All types are exported from "astrolace:types".
This package is structured as a monorepo:
-
playgroundcontains code for testing the package -
packagecontains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the playground and package watcher:
pnpm devYou can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
MIT Licensed. Made with ❤️ by AdamMatthiesen.
-
Shoelace.style- The whole purpose of this project!