Getting started

A quick tutorial to get you up and running with Radix Primitives.

Implementing a Label

In this quick tutorial, we will install and style the Label primitive.

1. Install the primitive package

Terminal window
npm install @radix-ng/primitives @angular/cdk

2. Import the parts

Import and structure the parts.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { RdxLabelRootDirective } from '@radix-ng/primitives/label';
@Component({
selector: 'app-root',
standalone: true,
imports: [RdxLabelRootDirective],
template: `
<h1>Hello from {{ name }}!</h1>
<a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
<div>
<label LabelRoot htmlFor="uniqId">First Name</label>
<input type="text" class="Input" id="uniqId" />
</div>
`
})
export class App {
name = 'Angular';
}
bootstrapApplication(App);

3. Add your styles

Add styles where desired.

@Component({
selector: 'app-root',
standalone: true,
imports: [RdxLabelRootDirective],
template: `
<h1>Hello from {{ name }}!</h1>
<a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
<div>
<label LabelRoot class="Label" htmlFor="uniqId">First Name</label>
<input type="text" class="Input" id="uniqId" />
</div>
`,
styles: `
.Label {
color: white;
font-size: 15px;
line-height: 35px;
font-weight: 500;
}
`
})

Summary

The steps above outline briefly what’s involved in using a Radix Primitive in your application.

These components are low-level enough to give you control over how you want to wrap them. You’re free to introduce your own high-level API to better suit the needs of your team and product.