Visual style

Visual properties and their impact on your theme.

Exhaustivity

Shuriken UI components are thought to be exhaustive in terms of functionality, covering a broad spectrum of potential use cases and scenarios. An exhaustive UI library anticipates the diverse needs of developers and designers, providing a comprehensive set of components that can be easily customized to meet specific requirements.

Shuriken UI is an exhaustive UI library, meaning that it is a powerful resource that minimizes the need for custom, one-off solutions, promoting a more standardized and efficient development process, when using its components.

Additionally, it empowers designers and developers to focus on creativity and innovation rather than spending excessive time reinventing the wheel, ultimately leading to more robust and feature-rich digital interfaces.

Consistency

Consistency is the most important thing in design. It is the key to a good user experience. It is the difference between a good design and a bad design. It is the difference between a good product and a bad product.

In Shuriken UI, we made sure that components remain consistent when used together. For example, all components share common properties, like border-radius, sizes, and colors. This makes it easy to use them together, by creating a coherent design system.

Branding

Branding is important. It is the first thing that people see when they visit your website or your app. Shuriken UI provides an easy way of branding your application by setting a few CSS variables. One of them is the primary color variable, which is used to reflect the main theme color on all components.

Shuriken UI also gives you the ability to control the main gray shade of your application by using the muted color abstraction. This will help you to create a consistent look and feel across your application. This is especially useful when you want to create a dark theme for your application.

For more details about branding your application, check out the colors section of the documentation.

Reusability

Designing UI library components with reusability in mind is essential for creating efficient and maintainable user interfaces. When components are crafted with a modular and flexible approach, they become building blocks that can be easily adapted and reused across different parts of an application or even in entirely separate projects.

By fostering a mindset of reusability during the design and implementation of Shuriken UI, we made sure that developers can create a foundation that not only streamlines development workflows but also contributes to a more cohesive and user-friendly digital ecosystem.

Sizes

Many Shuriken UI components have a size prop. This prop allows you to set the size of the component. If not set, the component will use the default size.

?????

Comp.vue

vue

Expand code

<template>
  <BaseAvatar src="/img/people/36.jpg" size="xxs" />
  <BaseAvatar src="/img/people/17.jpg" size="xs" />
  <BaseAvatar src="/img/people/29.jpg" size="sm" />
  <BaseAvatar src="/img/people/11.jpg" size="md" />
  <BaseAvatar src="/img/people/30.jpg" size="lg" />
</template>

Variants

Variants are visual variations of a component, they are used to create visual hierarchies and communicate relative importance.

Some components offer a different set of variants though all are designed to be consistent and complimentary with each other.

<template>
  <BaseButton variant="default" rounded="md" size="sm">
    <span>Get Started</span>
  </BaseButton>
  <BaseButton variant="muted" rounded="md" size="sm">
    <span>Get Started</span>
  </BaseButton>
  <BaseButton variant="primary" rounded="md" size="sm">
    <span>Get Started</span>
  </BaseButton>
  <BaseButton variant="dark" rounded="md" size="sm">
    <span>Get Started</span>
  </BaseButton>
</template>

?

Josh Meyers

UI/UX Designer

?

Janice Dakota

Sales Manager

?

Anna Lopez

Project Manager

?

Michael Jennings

Product Designer

Comp.vue

vue

Expand code

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <BaseCard variant="default" class="p-4 flex items-center gap-2">
      <!-- Card content -->
    </BaseCard>
    <BaseCard variant="muted" class="p-4 flex items-center gap-2">
      <!-- Card content -->
    </BaseCard>
    <BaseCard variant="none" class="p-4 flex items-center gap-2 bg-primary-500/10 border border-primary-600">
      <!-- Card content -->
    </BaseCard>
    <BaseCard variant="none" class="p-4 flex items-center gap-2 bg-muted-900 dark:bg-muted-50">
      <!-- Card content -->
    </BaseCard>
  </div>
</template>

Border radius

The rounded prop manages the radius factor applied to elements.

The resulting border-radius is contextual and differs depending on the component. For example, when set to full, a Button becomes pill shaped while a Card will never become fully rounded to prevent any broken styles.

rounded="none"

?

Notify friends

Send

rounded="sm"

?

Notify friends

Send

rounded="md"

?

Notify friends

Send

rounded="lg"

?

Notify friends

Send

rounded="full"

?

Notify friends

Send