Getting Started

Svelte Coverage Badge

Install and set up BIOS UI Svelte components in your project.

�
Requirements

BIOS UI Svelte components are designed for simplicity and don't require complex setup. Make sure you have the following in your project:

  • Svelte 5: Latest version of Svelte framework
  • Tailwind CSS 4: For styling and utility classes
  • @bios-ui/core: Latest version of the core design system

Note: No additional build tools or complex configuration required. BIOS UI components work out of the box with standard Svelte and Tailwind setups.

📦
Installation

Install the BIOS UI Svelte package using your preferred package manager:

npm

npm install @bios-ui/svelte @bios-ui/core

pnpm

pnpm add @bios-ui/svelte @bios-ui/core

yarn

yarn add @bios-ui/svelte @bios-ui/core

⚙️
Setup

1. Setup Tailwind

Add the following configuration to your tailwind.config.js:

<!-- tailwind.config.js -->

Then in the your main css file, load the config (Tailwind v4 require this). also you will need to import the core styles theme to centralize it:

<!-- app.css -->

To inject the tailwind theme with core design tokens, this way you can use the design tokens with tailwind classes later

<!-- +page.svelte -->

2. Import Styles

Import the core styles in your main app file:

<!-- +layout.svelte -->

3. Import Components

once above steps are done, you can start using the components in your Svelte files.

<!-- +page.svelte -->

🔧
Troubleshooting

Styling Issues

If components don't appear styled correctly:

  1. make sure you have done all the above steps properly, especially 1st and 2nd steps
  2. Check that the import is in the correct order (before other styles)
  3. Verify your bundler is processing CSS files correctly

TypeScript Errors

If you encounter TypeScript errors:

  1. Ensure you're using a compatible TypeScript version (5.0+)
  2. Check that your tsconfig.json includes the node_modules
  3. Try restarting your TypeScript server

Build Issues

If you encounter build issues:

  1. Clear your node_modules and reinstall dependencies
  2. Check that your bundler supports Svelte files
  3. Ensure all peer dependencies are installed

💬
Support

Need help? Check out: