# Getting started The components in Green Core are standard web components, so you can use them with or without any framework, but since most consumers will be using Angular or React, idiomatic wrappers are provided for those frameworks. ### [Go here for Angular](/docs/guides-angular--docs) ### [Go here for React](/docs/guides-react--docs) Keep reading below for other usages ### Defining and tree-shaking Web components needs to be defined in the custom elements registry before they can be used, and there are a few different ways to handle this. - Use a sub-path side-effect import: ```ts import '@sebgroup/green-core/components/button/index.js' ``` This will automatically register the component in the custom elements registry, and you can use it immediately, but it will not be tree-shakable, so it will be included in your bundle whether you use it or not. - Use a pure import and define separately: ```ts // Import the component class import { GdsButton } from '@sebgroup/green-core/pure' // Call define to register with the custom elements registry GdsButton.define() ``` - For POCs and prototyping where you just want to gain access to all the components quickly, you can import everything at once: ```ts import '@sebgroup/green-core/everything' ``` This will import all components and icons, and register them in the custom elements registry. This is not tree-shakable and not recommended for production use, as it will include everything in your bundle (~700kb). When using Green with Angular or React, the importing and defining is done automatically in a tree-shakable way. ### Scoping Scoping is done automatically for React, and for Lit and Angular we provide simple solutions (see below for Lit, and link above for Angular), but if you are using the components in some other way, you need to set up your own solution or disable scoping. For POCs and prototyping, you can disable scoping by setting the `GDS_DISABLE_VERSIONED_ELEMENTS` global variable to `true` before importing any components. This will make all components use their original element names (e.g. `` instead of ``). ```html ... ``` ***Warning:** Never disable scoping for a microfrontend or production application, as this will cause conflicts with other applications using the same components.* ## Using with Lit The components in Green core rely on the Lit framework for their internal implementations, and it is of course also possible to use the components in applications or other components using Lit. Here is a minimal example: ```ts // This custom `html` template literal tag from Green Core extends the default `lit-html` tag to handle element version scoping. // Import the components that you need import '@sebgroup/green-core/components/button/index.js' @customElement('my-app') export class MyApp extends LitElement { static styles = css`` connectedCallback() { super.connectedCallback() } render() { return html`Click me!` } } ```