# @sveltevietnam/ui
> UI kit for Svelte Vietnam
Latest version **1.0.0-next.30** (published 2024-06-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install @sveltevietnam/ui
pnpm add @sveltevietnam/ui
yarn add @sveltevietnam/ui
bun add @sveltevietnam/ui
```
## Health
**Score 35/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.0.0-next.30 |
| Published | 2024-06-03 |
| First published | 2024-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 19 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Author | Svelte Vietnam |
| Maintainers | vnphanquang |
| Keywords | svelte, sveltevietnam, design system, css, component, pattern, UI, tailwind |
## Links
- npm: https://www.npmjs.com/package/@sveltevietnam/ui
- Repository: https://github.com/sveltevietnam/sveltevietnam.dev
- Homepage: https://www.sveltevietnam.dev
- Issues: https://github.com/sveltevietnam/sveltevietnam.dev/issues
- npm.io page: https://npm.io/package/@sveltevietnam/ui
## Dependencies (19)
- [shiki](https://npm.io/package/shiki.md) 1.2.4
- [mdsvex](https://npm.io/package/mdsvex.md) https://github.com/vnphanquang/MDsveX/raw/master/packages/mdsvex/mdsvex-0.11.0.tgz
- [hastscript](https://npm.io/package/hastscript.md) ^9.0.0
- [postcss-js](https://npm.io/package/postcss-js.md) ^4.0.1
- [remark-gfm](https://npm.io/package/remark-gfm.md) ^4.0.0
- [zimmerframe](https://npm.io/package/zimmerframe.md) ^1.1.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.19
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.9
- [postcss-html](https://npm.io/package/postcss-html.md) ^1.6.0
- [postcss-import](https://npm.io/package/postcss-import.md) ^16.1.0
- [postcss-mixins](https://npm.io/package/postcss-mixins.md) ^10.0.0
- [postcss-nesting](https://npm.io/package/postcss-nesting.md) ^12.1.1
- [@svelte-put/copy](https://npm.io/package/@svelte-put/copy.md) ^4.0.0-next.0
- [remark-containers](https://npm.io/package/remark-containers.md) ^1.2.0
- [hast-util-to-string](https://npm.io/package/hast-util-to-string.md) ^3.0.0
- [svelte-parse-markup](https://npm.io/package/svelte-parse-markup.md) ^0.1.2
- [postcss-color-scheme](https://npm.io/package/postcss-color-scheme.md) ^1.0.1
- [@tailwindcss/typography](https://npm.io/package/@tailwindcss/typography.md) ^0.5.12
- [postcss-custom-selectors](https://npm.io/package/postcss-custom-selectors.md) ^7.1.8
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads
## Recent versions
- 1.0.0-next.30 (latest) — 2024-06-03
- 1.0.0-next.3 (next) — 2024-02-05
- 1.0.0-next.29 — 2024-06-03
- 1.0.0-next.28 — 2024-06-03
- 1.0.0-next.27 — 2024-04-19
- 1.0.0-next.26 — 2024-04-18
- 1.0.0-next.25 — 2024-04-14
- 1.0.0-next.24 — 2024-04-10
- 1.0.0-next.23 — 2024-03-20
- 1.0.0-next.22 — 2024-03-15
- 1.0.0-next.21 — 2024-03-15
- 1.0.0-next.20 — 2024-03-09
- 1.0.0-next.19 — 2024-03-08
- 1.0.0-next.18 — 2024-03-05
- 1.0.0-next.17 — 2024-03-03
- … 13 more at https://npm.io/package/@sveltevietnam/ui/versions
## README
# @sveltevietnam/ui
![]()
[![npm.badge]][npm.link] [![MIT][license.badge]][license] [![Discord][socials.discord.badge]][socials.discord]
A design system for [the Svelte Vietnam project](https://github.com/sveltevietnam/sveltevietnam.dev), packaged as [Tailwind presets](https://tailwindcss.com/docs/presets).
## Installation
Install the necessary packages using your package manger of choice:
```bash
pnpm add -D tailwindcss postcss svelte @sveltevietnam/ui
```
Re-export the predefined Postcss config:
```javascript
// postcss.config.js
import config from '@sveltevietnam/ui/css/postcss';
export default config;
```
Add the preset to your `tailwind.config.js`:
```javascript
// tailwind.config.js
import sveltevietnam from '@sveltevietnam/ui/css/tailwind';
/** @type {import("tailwindcss").Config } */
export default {
content: ['./src/**/*.{html,js,svelte,ts,md}', 'svelte.config.js'],
presets: [...sveltevietnam],
};
```
In your entry CSS, import `fonts.css`:
```css
/* app.css */
@import url('@sveltevietnam/ui/css/fonts.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Editor Support
It is recommended, if possible, that you install the appropriate editor plugin/extension that adds support for TailwindCSS Language Server. If you are using VSCode, install the official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss). This greatly improves code discovery and developer productivity.
## Documentation
...Coming soon...
[license.badge]: https://img.shields.io/badge/license-MIT-blue.svg
[license]: ./LICENSE
[npm.badge]: https://img.shields.io/npm/v/@sveltevietnam/ui
[npm.link]: https://www.npmjs.com/package/@sveltevietnam/ui
[socials.discord.badge]: https://img.shields.io/discord/1066621936546877450?color=7289da&label=Discord&logo=discord
[socials.discord]: https://discord.sveltevietnam.dev
---
_Source: https://npm.io/package/@sveltevietnam/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._