Styling

RadixNG are unstyled and compatible with any styling solution giving you complete control over styling.

Overview

Classes

All components accept class attributes, just like regular Angular component. This class will be passed to the host:.

For some primitives based on @Components, the className property is used and applied to the child element of the component.

Data attributes

When components are stateful, their state will be exposed in a data-state attribute.

For example, when an Accordion Item is opened, it includes a data-state="open" attribute.

Styling with CSS

Styling a part

You can style a component part by targeting the class that you provide.

<div [defaultValue]="'item-1'" rdxAccordionRoot>
  <div class="AccordionItem" [value]="'item-1'" rdxAccordionItem>
    <!-- ... -->
  </div>
</div>

<style>
.AccordionItem {
  /* ... */
}
</style>

Styling a state

You can style a component state by targeting its data-state attribute.

.AccordionItem {
  border-bottom: 1px solid gainsboro;
}

.AccordionItem[data-state="open"] {
  border-bottom-width: 2px;
}

Styling with Tailwind CSS

The examples below are using Tailwind CSS, but you can use any library of your choice.

Styling a part

You can style a component part by targeting the class.

<div [defaultValue]="'item-1'" rdxAccordionRoot>
  <div class="border border-gray-400 rounded-2xl" [value]="'item-1'" rdxAccordionItem>
    <!-- ... -->
  </div>
</div>

Styling a state

With Tailwind CSS’s powerful variant selector, you can style a component state by targeting its data-state attribute.

<div [defaultValue]="'item-1'" rdxAccordionRoot>
  <div class="
        border border-gray-400 rounded-2xl
        data-[state=open]:border-b-2 data-[state=open]:border-gray-800
      " [value]="'item-1'" rdxAccordionItem>
    <!-- ... -->
  </div>
</div>

Extending a primitive

Extending a primitive is done the same way you extend any Angular component.

Host Directive

One of the best ways is to use hostDirectives.

import { Directive } from '@angular/core';
import { RdxLabelDirective } from '@radix-ng/primitives/label';

@Directive({
    hostDirectives: [RdxLabelDirective],
    selector: '[myLabel]',
    standalone: true
})
export class MyLabelDirective {}

Components

import { Component } from '@angular/core';
import { RdxLabelDirective } from '@radix-ng/primitives/label';

@Component({
    hostDirectives: [RdxLabelDirective],
    selector: 'my-label',
    standalone: true,
    template: `
        <ng-content />
    `
})
export class MyLabelDirective {}