Fractalsvelte is a Svelte component library for building interfaces without Tailwind or a headless UI dependency. It pairs straightforward Svelte components with an indented SASS styling system and a small set of CSS custom properties.
The package is designed for applications that want a consistent visual base while keeping normal Svelte markup, component props, and project-owned styles in view.
What it includes
- Components for controls, layout, feedback, data display, navigation, and overlays.
- Simple components for common use cases, such as
Button,Input, andSelect. - Compound APIs for composable overlays and menus, including
DialogRoot,DropdownMenuRoot,MenubarRoot, andNavigationMenuRoot. - SASS styles and CSS tokens that can be overridden globally or scoped to part of an interface.
- TypeScript definitions generated with the published package.
Who it is for
Use Fractalsvelte when your project already uses Svelte 5 and you want a maintained visual language without adopting a utility-first CSS framework. The components work especially well in SvelteKit applications, though they do not require SvelteKit-specific APIs at runtime.
Requirements
| Requirement | Supported version |
|---|---|
| Node.js | >=18.13 — Node 20 or 22 LTS recommended |
| Svelte | ^5.0.0 |
| SvelteKit | ^2.0.0 |
| Sass | Required to load the provided indented SASS styles |
| Vite | Required by fractals-styler for generated utility classes |
How the pieces fit together
- Install
fractalsveltefor the components. - Load the package stylesheet once so shared classes and default tokens are available.
- Add
fractals-stylerwhen you want the package’s generated spacing, sizing, and responsive utility classes in your application. - Import individual components from
fractalsvelte; Vite can tree-shake unused exports.
Continue with Installation for the exact setup.