Styling

As CsTech, our main aim is accessibility for Cactus UI when we created the library. Therefore, each component comes with minimum styling that allows the component usable easily and as it is supposed to be. For a dev-friendly development experience, the styling of any Cactus UI component is kept simple and flexible as much as possible. You can style components the way using CSS, sass or styled-components, etc.

We always will try to keep minimum default styling and be as flexible as possible for all components.

Importing Built-in Style

Some of Cactus UI components have built-in styling to display correctly and work properly. Styling should be imported like below:

import { <ComponentName> } from '@ciceksepeti/cui-<componentName>';
import '@ciceksepeti/cui-<componentName>/styles.css';

info

Every component page has examples about using the component and the examples show clearly which component needs its built-in style importing.

Also, CSS bundle importing can be used to access all styling with one import.

import '@ciceksepeti/cui/styles.css';

Overriding & Adding New Styles

You can style any component of Cactus UI like any other element in your app. Also, Cactus UI provides data attributes for each component and its subcomponent, to allow you can easily reach and style components.

Using Data Attributes

Each component has a data-cui-<componentName> attribute which you can apply style easily.

[data-cui-listbox-button] {
  color: black;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 4px;
  align-items: center;
  display: inline-flex;
  background-color: white;
  border: 1px solid #eee;
  justify-content: space-between;
}

[data-cui-listbox-list] {
  margin: 0;
  padding: 0;
  list-style: none;
}

To apply your style depending on the state of the component, Cactus UI provides pseudo attributes.

[data-cui-listbox-button][aria-disabled='true'] {
  opacity: 0.5;
}
[data-cui-listbox-arrow][data-expanded='false']::before {
  content: '\276F';
}

info

Some components like Listbox has more than a data attribute cause it has subcomponents. You can find all data attributes of the component on the styling part of the component's page.

Using Styled Component

import { Checkbox } from '@ciceksepeti/cui-checkbox';
import '@ciceksepeti/cui-checkbox/styles.css';
import styled from 'styled-components';

const StyledCheckbox = styled(Checkbox)`
  font-size: 24px;
  text-align: center;
  color: palevioletred;
  border: 1px solid red;
`;

Styling

Importing Built-in Style

Overriding & Adding New Styles

Using Data Attributes

Using Data Attributes

Using Styled Component

Using Styled Component

Inline CSS

Inline CSS

CSS Classname

CSS Classname

Styling

Importing Built-in Style​

Overriding & Adding New Styles​

Using Data Attributes​

Using Data Attributes

Using Data Attributes

Using Styled Component​

Using Styled Component

Using Styled Component

Inline CSS​

Inline CSS

Inline CSS

CSS Classname​

CSS Classname

CSS Classname

Importing Built-in Style

Overriding & Adding New Styles

Using Data Attributes

Using Styled Component

Inline CSS

CSS Classname