Is Fractalsvelte a Tailwind component library?
No. Fractalsvelte uses normal Svelte components, indented SASS, CSS custom-property tokens, and optional generated utility classes from fractals-styler. You can use it in a Tailwind project, but Tailwind is neither required nor bundled.
Which versions of Svelte and SvelteKit are supported?
Fractalsvelte is built for Svelte 5 and declares ^5.0.0 as its Svelte peer dependency. SvelteKit is recommended for applications and documentation sites, but the components do not call SvelteKit APIs at runtime; a Svelte 5 application using Vite can use them too.
Use Node.js 18.13.0 or newer. Node 20 or 22 LTS is the practical choice for a new application.
Do I need Sass and Fractals Styler?
Sass is required because the package exposes an indented SASS stylesheet. fractals-styler is required when you want the numeric utility classes used throughout the examples, such as box, gap16, and pad32.
pnpm add fractalsvelte fractals-styler
pnpm add -D sass
If you do not use those generated utility classes in your own application, the component package still needs its SASS entry point loaded once.
Where should I import the styles?
Import both styles once from the root layout or application entry, before rendering components. Do not import them separately in every component.
<script lang="ts">
import 'virtual:fractals-styler.css';
import 'fractalsvelte/styles/index.sass';
let { children } = $props();
</script>
{@render children()}
Can I import just one component?
Yes. Every public component is exported from the package root, and modern bundlers can tree-shake unused exports.
<script lang="ts">
import { Button } from 'fractalsvelte';
</script>
<Button>Save changes</Button>
Import the parts actually used by a view instead of creating a local barrel that imports the entire library.
Are the components usable from JavaScript?
Yes. The package is authored in TypeScript and ships declarations, but JavaScript Svelte applications can use the same imports and props. TypeScript is recommended because your editor can then show each component’s props, callback signatures, and compound exports.
When should I use a simple API versus compound components?
Start with the simple API when its provided structure matches the interface. For example, a data-driven DropdownMenu works well for a short list of actions. Move to compound exports when you need custom triggers, grouped items, separators, checkable choices, or a custom layout.
Keep compound parts inside their matching root. The root provides the shared state and accessibility relationship for its trigger, content, and items.
How do I control a component from parent state?
Use the binding advertised in the component’s Props table. Common examples are bind:value, bind:checked, bind:open, bind:selected, and bind:expanded.
<script lang="ts">
import { Dialog } from 'fractalsvelte';
let open = $state(false);
</script>
<button onclick={() => (open = true)}>Create item</button>
<Dialog title="Create item" bind:open>Form content</Dialog>
Bindings are only present where the component’s state is intended to be controlled. Check the individual component page instead of assuming every prop is bindable.
How do I customize the visual design?
Start by overriding the CSS custom-property tokens on :root for a global theme or on an ancestor for a local theme. This preserves the component’s internal states, spacing, and accessibility behaviour.
.brand-surface
--accent10: #6D28D9
--accent20: #5B21B6
--border-primary: #DDD6FE
Avoid targeting a component’s generated internal markup unless a token or public prop cannot express the requirement. Component pages describe their supported variants and composition points.
Does Fractalsvelte handle accessibility for me?
Components include the semantics and keyboard behaviour appropriate to their intended interaction—for example, native form controls, modal dialogs, menu roles, tree navigation, and keyboard-resizable panels. Your application is still responsible for meaningful labels, correct action wording, logical focus order, and using the right component for the job.
Can I copy a component into my project instead of using the package?
Yes. Each component page has a Standalone installation mode that exposes its source files. Copy every listed file, preserve their relative imports, and load the same shared styles and tokens. Use the package when you want upgrades and a single shared implementation; use standalone files when project ownership matters more than package updates.
How do I know which component to choose?
Start at the component’s live demo, then read its “Variants and behaviour” note and Props table. As a rule: use Dialog for a focused task, Alert Dialog for confirmation, Popover for compact interactive content, Tooltip for short supplementary explanations, and Drawer or Sheet for a larger edge-based secondary workflow.