CoreDS Components

Svelte 5 component library for CoreDS, published on npm as @gce-aws/coreds-svelte-components.

Live documentation: Storybook Package listing: npmjs

Installation

There are 2 ways to get components in your projects, one that will download components locally into your project at src/lib/components/<ComponentName>/ using a CLI (recommended), or using the npm package itself.

Installing using the CLI (recommended)

You can use this command to see the available components in the package (optional):

npx @gce-aws/coreds-svelte-components list

This command downloads the Button component. Replace "Button" with the component of your choosing.

npx @gce-aws/coreds-svelte-components add Button

Transitive component dependencies are included automatically. Use --force to overwrite existing folders.

Installing using the npm package

Alternatively, you can download the npm package and import the components from there. Keep in mind that you don't get the files locally using this method.

npm i @gce-aws/coreds-svelte-components

Then import whichever component you'd like in your Svelte's <script> element. This example shows the Button component import statement:

import { Button } from '@gce-aws/coreds-svelte-components/Button';

Styles

In our svelte-seed repo, we already include the design system CSS files in /src/routes/fonts.css and /src/routes/style.css. These files are already imported in /src/routes/+layout.svelte, so you likely don't have to do anything besides just adding components!

In the scenario where you are working on a project not based on the svelte-seed, here's what to do:

Download the npm package:

npm i @gce-aws/coreds-svelte-components

Then, import the css files in your global css file (/src/app.css) or your root layout (+layout.svelte)page.

@import '@gce-aws/coreds-svelte-components/css/fonts.css';
@import '@gce-aws/coreds-svelte-components/css/style.css';