First run
npm install @reshape-biotech/design-systemFirst run
``sh`
bun link
To create a soft link you can install in your consuming project's node_modules.
Add this to your consumer's package.json:
`sh`
"@reshape-biotech/design-system": "link:@reshape-biotech/design-system"
or run this:
`sh`
bun link @reshape-biotech/design-system
Now, to have the package buidling watch for changes:
`sh`
bun run package --watch
Set the package version in the package.json file.
Publish and versioning is automatically handled through GitHub actions.
To build and publish manually:
`bash`
bun run package
`bash`
bun publish
bun publish requires a valid NPM publishing token to be set in your environment.
As this project heavily uses TailwindCSS you must have tailwind include the component files when compiling your bundle css
Specifically, your tailwind.config.js should have something like this:
`js`
content: ['./src/*/.{html,js,svelte,ts}',
'./node_modules/@reshape-biotech/design-system/*/.{svelte,ts,js}',
],
This package contains the core design system for Reshape Biotech frontend projects, providing a consistent and reusable set of components and styles.
1. Component Library
- A collection of shared, reusable Svelte components
- Standardized UI elements following Reshape Biotech's design guidelines
- Fully typed components with TypeScript support
2. Tailwind Configuration
- Pre-configured Tailwind CSS setup
- Custom theme extensions
- Shared utility classes
3. Design Tokens
- Color palette
- Typography
- Shadow definitions
Import components and styles from the design system:
`typescript``
import { Button, Card } from '@reshape/design-system';
import '@reshape/design-system/styles.css';