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's 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 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 own 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 to you can apply style easier.

[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 provide 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