https://github.com/significa/significa-svelte-ui
Our internal Svelte UI library.
https://github.com/significa/significa-svelte-ui
significa svelte tailwindcss
Last synced: 10 months ago
JSON representation
Our internal Svelte UI library.
- Host: GitHub
- URL: https://github.com/significa/significa-svelte-ui
- Owner: significa
- Created: 2022-11-14T11:42:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-28T11:40:53.000Z (about 2 years ago)
- Last Synced: 2025-08-17T05:19:42.334Z (10 months ago)
- Topics: significa, svelte, tailwindcss
- Language: Svelte
- Homepage: https://svelte-ui.significa.co
- Size: 2.12 MB
- Stars: 12
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Significa Svelte UI
This project is responsible for Significa's Svelte UI library.
Storybook preview available at [svelte-ui.significa.co](https://svelte-ui.significa.co).
This package is published as `@significa/significa-svelte-ui` in the
[NPM official registry](https://www.npmjs.com/package/@significa/svelte-ui) and
[GitHub package registry](https://github.com/significa/significa-svelte-ui/pkgs/npm/svelte-ui).
[](https://svelte-ui.significa.co)
## Using the package
### Installation
`npm install --save @significa/svelte-ui`
If you are using the GitHub package registry you might need to authenticate with the registry, see
[working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry)
for more information.
### Configuring tailwind
In your tailwind configuration file (`tailwind.config.cjs`), import our tailwind preset and update
the `content` key to include our package. Optionally (but ideally), you can include our brand fonts
by providing a path to your project's static font files.
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@significa/svelte-ui/**/*.{html,js,svelte,ts}' // add this
],
presets: [
require('@significa/svelte-ui/tailwind-preset') // add this
],
theme: {
// your theme
}
};
```
### Including fonts (optional)
If the project needs to include our brand fonts, you can call the preset defining custom fonts and
their path:
```js
module.exports = {
presets: [
require('@significa/svelte-ui/tailwind-preset')({
fonts: {
sans: {
name: 'Significa Sans',
fontFaces: [
{
fontWeight: '400',
src: `url('/fonts/significa-regular.woff2') format('woff2')`,
ascentOverride: '95%'
},
{
fontWeight: '500',
src: `url('/fonts/significa-medium.woff2') format('woff2')`,
ascentOverride: '95%'
},
{
fontWeight: '600',
src: `url('/fonts/significa-semibold.woff2') format('woff2')`,
ascentOverride: '95%'
}
]
}
}
})
]
};
```
## Development
1. Ensure you are using a compatible node version (see [.nvmrc](./.nvmrc)
and [`node_versions` in `ci-cd.yaml`](./.github/workflows/ci-cd.yaml)).
2. Install the dependencies with `npm install`.
3. Start Storybook's component preview server with `npm run storybook`.
Access it at `http://localhost:6006/`.
### Releasing new versions
Just create a new [release](https://github.com/significa/significa-svelte-ui/releases) with a semver
compliant name, prefixed by `v`. Ex: `v1.2.3`, `v1.2.3-sample`.