@wesman-solutions/wesman-ui

v0.2.3

Published

24 days ago

Wesman Solutions UI Library

0High
0Medium
0Low

ws-development

svelte

Wesman UI Library

Svelte 5 & Tailwind UI Component library based on shadcn-svelte created for and by Wesman Solutions.

Usage

To use the Wesman UI Library in a new project, first create a new Svelte project with the commands below:

Make sure you include tailwindcss in the installation prompt.

npx sv create my-app
cd my-app
npm run dev

Now install @wesman-solutions/wesman-ui library:

npm i @wesman-solutions/wesman-ui -D

After installation add the following to /src/app.css:

@import 'tailwindcss';

/* Import wesman-ui styles */
@source '../node_modules/@wesman-solutions/wesman-ui/dist';
@import '@wesman-solutions/wesman-ui/styles';

And import the necessary fonts in the /src/app.html file:

<!doctype html>
<html lang="nl">

<head>
	<meta charset="utf-8" />
	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="color-scheme" content="dark dark" />
	<meta name="robots" content="noindex" />

	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
		href="https://fonts.googleapis.com/css2?family=Alexandria:[email protected]&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
		rel="stylesheet" />

	%sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover" class="dark">
	<div style="display: contents">%sveltekit.body%</div>
</body>

</html>

You can now import components through @wesman-solutions/wesman-ui, like the following example:

<script lang="ts">
    import { Card } from '@wesman-solutions/wesman-ui';
</script>

<Card.Root>
    <Card.Header>
    <Card.Content>
        <Card.Title>Wesman UI Card</Card.Title>
        <Card.Description>This is a card component from Wesman UI.</Card.Description>
    </Card.Content>
    </Card.Header>
    <Card.Content>
        <p>This card is styled using Wesman UI components and Tailwind CSS.</p>
    </Card.Content>
    <Card.Footer>
    <Card.Content>
        <p>Footer content goes here.</p>
    </Card.Content>
    </Card.Footer>
</Card.Root>

A full list of all components can be found at ui.wesmansolutions.com.

Storybook

Creating a new component

Building, Versioning and Publishing

To build your changes to the /dist folder output run:

npm run build

Make sure to commit these changes, and update the npm version by running:

npm version [patch/minor/major]

Push your changes, and create a PR to the main branch. When accepted, run the following to publish the new version to NPM:

npm publish

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Wesman UI Library

Usage

Storybook

Creating a new component

Building, Versioning and Publishing