components.json
Configuration for your project.
The components.json file holds configuration for your project.
We use it to understand how your project is set up and how to generate components customized for your project.
components.json file is optional and **only required if you're
using the CLI** to add components to your project. If you're using the copy
and paste method, you don't need this file.You can create a components.json file in your project by running the following command:
npx shadcn-svelte@latest init
See the CLI section for more information.
$schema
You can see the JSON Schema for components.json here.
{
"$schema": "https://shadcn-svelte.com/schema.json"
}
style
The style for your components. This cannot be changed after initialization.
{
"style": "default" | "new-york"
}
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
const frameworks = [
{
value: "sveltekit",
label: "SvelteKit"
},
{
value: "next",
label: "Next.js"
},
{
value: "astro",
label: "Astro"
},
{
value: "nuxt",
label: "Nuxt.js"
}
];
let framework = $state("");
const frameworkLabel = $derived(
frameworks.find((f) => f.value === framework)?.label ?? "Select a framework"
);
</script>
<Card.Root class="w-[350px]">
<Card.Header>
<Card.Title>Create project</Card.Title>
<Card.Description>Deploy your new project in one-click.</Card.Description>
</Card.Header>
<Card.Content>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label for="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div class="flex flex-col space-y-1.5">
<Label for="framework">Framework</Label>
<Select.Root type="single" bind:value={framework}>
<Select.Trigger id="framework">
{frameworkLabel}
</Select.Trigger>
<Select.Content>
{#each frameworks as framework}
<Select.Item value={framework.value} label={framework.label} />
{/each}
</Select.Content>
</Select.Root>
</div>
</div>
</form>
</Card.Content>
<Card.Footer class="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</Card.Footer>
</Card.Root>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
const frameworks = [
{
value: "sveltekit",
label: "SvelteKit"
},
{
value: "next",
label: "Next.js"
},
{
value: "astro",
label: "Astro"
},
{
value: "nuxt",
label: "Nuxt.js"
}
];
let framework = $state("");
const selectedFramework = $derived(
frameworks.find((f) => f.value === framework) ?? "Select a framework"
);
</script>
<Card.Root class="w-[350px]">
<Card.Header>
<Card.Title>Create project</Card.Title>
<Card.Description>Deploy your new project in one-click.</Card.Description>
</Card.Header>
<Card.Content>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label for="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div class="flex flex-col space-y-1.5">
<Label for="framework">Framework</Label>
<Select.Root type="single" bind:value={framework}>
<Select.Trigger id="framework">
{selectedFramework}
</Select.Trigger>
<Select.Content>
{#each frameworks as { value, label }}
<Select.Item {value} {label} />
{/each}
</Select.Content>
</Select.Root>
</div>
</div>
</form>
</Card.Content>
<Card.Footer class="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</Card.Footer>
</Card.Root>
tailwind
Configuration to help the CLI understand how Tailwind CSS is set up in your project.
See the installation section for how to set up Tailwind CSS.
tailwind.config
Path to where your tailwind.config.js file is located.
{
"tailwind": {
"config": "tailwind.config.js" | "tailwind.config.ts"
}
}
tailwind.css
Path to the CSS file that imports Tailwind CSS into your project.
{
"tailwind": {
"css": "src/app.{p,post}css"
}
}
tailwind.baseColor
This is used to generate the default color palette for your components. This cannot be changed after initialization.
{
"tailwind": {
"baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
}
}
aliases
The CLI uses these values and the alias config from your svelte.config.js file to place generated components in the correct location.
Path aliases have to be set up in your svelte.config.js file.
aliases.utils
Import alias for your utility functions.
{
"aliases": {
"utils": "$lib/utils.js"
}
}
aliases.components
Import alias for your components.
{
"aliases": {
"components": "$lib/components"
}
}
Typescript
{
"typescript": true | false
}
On This Page