Convert Figma logo to code with AI

kobaltedev logokobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.

1,217
62
1,217
46

Top Related Projects

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

37,442

⚡️ Simple, Modular & Accessible UI Components for your React Applications

68,588

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

Quick Overview

Kobalte is a UI toolkit for building accessible web applications with SolidJS. It provides a set of low-level UI components and primitives that are unstyled, fully accessible, and highly customizable.

Pros

  • Fully accessible components that adhere to WAI-ARIA guidelines
  • Unstyled and highly customizable, allowing for complete design flexibility
  • Built with SolidJS, offering excellent performance and reactivity
  • Comprehensive documentation and examples

Cons

  • Limited to SolidJS ecosystem, not suitable for other frameworks
  • Relatively new project, may have fewer community resources compared to more established libraries
  • Requires additional styling effort as components are unstyled by default
  • Learning curve for developers new to SolidJS or component-based architecture

Code Examples

Creating a simple button:

import { Button } from "@kobalte/core";

function MyButton() {
  return <Button>Click me</Button>;
}

Implementing a custom checkbox:

import { Checkbox } from "@kobalte/core";

function MyCheckbox() {
  return (
    <Checkbox>
      <Checkbox.Input />
      <Checkbox.Control>
        <Checkbox.Indicator></Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Accept terms and conditions</Checkbox.Label>
    </Checkbox>
  );
}

Using the Select component:

import { Select } from "@kobalte/core";

function MySelect() {
  return (
    <Select
      options={["Apple", "Banana", "Orange"]}
      placeholder="Choose a fruit"
    >
      <Select.Trigger>
        <Select.Value<string>>{(state) => state.selectedOption()}</Select.Value>
      </Select.Trigger>
      <Select.Portal>
        <Select.Content>
          <Select.Listbox>
            {(option) => <Select.Option value={option}>{option}</Select.Option>}
          </Select.Listbox>
        </Select.Content>
      </Select.Portal>
    </Select>
  );
}

Getting Started

To start using Kobalte in your SolidJS project:

  1. Install the package:

    npm install @kobalte/core
    
  2. Import and use components in your SolidJS application:

    import { Button } from "@kobalte/core";
    
    function App() {
      return (
        <div>
          <h1>My Kobalte App</h1>
          <Button onClick={() => alert("Hello, Kobalte!")}>
            Click me
          </Button>
        </div>
      );
    }
    
    export default App;
    

Remember to style your components as needed, as Kobalte provides unstyled primitives.

Competitor Comparisons

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

Pros of Radix Primitives

  • More extensive component library with a wider range of UI elements
  • Stronger community support and ecosystem integration
  • Better documentation and examples for developers

Cons of Radix Primitives

  • React-specific, limiting its use to React projects only
  • Larger bundle size due to more components and features

Code Comparison

Radix Primitives (React):

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Dialog Title</Dialog.Title>
    <Dialog.Description>Dialog content here</Dialog.Description>
  </Dialog.Content>
</Dialog.Root>

Kobalte (SolidJS):

import { Dialog } from "@kobalte/core";

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Content>
      <Dialog.Title>Dialog Title</Dialog.Title>
      <Dialog.Description>Dialog content here</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Both libraries offer similar component structures and APIs, but Kobalte is designed for SolidJS while Radix Primitives is for React. Kobalte provides a more lightweight alternative with a focus on SolidJS integration, while Radix Primitives offers a more comprehensive set of components and broader ecosystem support within the React community.

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

Pros of React Spectrum

  • Comprehensive set of accessible, adaptive UI components
  • Backed by Adobe, ensuring long-term support and development
  • Extensive documentation and design guidelines

Cons of React Spectrum

  • Larger bundle size due to its comprehensive nature
  • Steeper learning curve for developers new to the ecosystem
  • Less flexibility in customization compared to more lightweight alternatives

Code Comparison

React Spectrum:

import { Button } from '@adobe/react-spectrum';

function MyComponent() {
  return <Button variant="cta">Click me</Button>;
}

Kobalte:

import { Button } from '@kobalte/core';

function MyComponent() {
  return <Button.Root>Click me</Button.Root>;
}

Key Differences

  • React Spectrum provides a more opinionated and complete design system, while Kobalte offers more flexibility and a smaller footprint.
  • Kobalte is built for SolidJS, whereas React Spectrum is designed for React applications.
  • React Spectrum includes more advanced features like internationalization and adaptive layouts out of the box.

Use Cases

  • Choose React Spectrum for large-scale enterprise applications requiring a consistent, accessible UI with minimal customization.
  • Opt for Kobalte when building SolidJS applications or when you need more control over the styling and behavior of individual components.
37,442

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Pros of Chakra UI

  • Extensive component library with a wide range of pre-built UI elements
  • Strong community support and extensive documentation
  • Highly customizable with theming capabilities

Cons of Chakra UI

  • Larger bundle size due to its comprehensive feature set
  • Steeper learning curve for beginners due to its extensive API
  • React-specific, limiting its use in other frameworks

Code Comparison

Chakra UI:

import { Button, Box } from '@chakra-ui/react'

function Example() {
  return (
    <Box>
      <Button colorScheme="blue">Click me</Button>
    </Box>
  )
}

Kobalte:

import { Button } from '@kobalte/core'

function Example() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Kobalte offers a more lightweight and framework-agnostic approach, focusing on accessibility and customization. It provides unstyled components that can be easily adapted to different design systems. Chakra UI, on the other hand, offers a more comprehensive set of styled components out of the box, making it quicker to build consistent UIs but potentially at the cost of flexibility and performance for smaller projects.

68,588

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

Pros of ui

  • More comprehensive component library with a wider range of UI elements
  • Highly customizable with Tailwind CSS integration
  • Active community and frequent updates

Cons of ui

  • Requires more setup and configuration due to its modular nature
  • Steeper learning curve for developers new to Tailwind CSS
  • Less focus on accessibility features out-of-the-box

Code Comparison

ui:

import { Button } from "@/components/ui/button"

export function Example() {
  return <Button variant="outline">Click me</Button>
}

Kobalte:

import { Button } from "@kobalte/core"

export function Example() {
  return <Button.Root>Click me</Button.Root>
}

Key Differences

  • ui is built on top of Tailwind CSS, offering more styling flexibility
  • Kobalte focuses on providing accessible, unstyled components
  • ui has a larger ecosystem and more third-party resources
  • Kobalte emphasizes simplicity and ease of use for basic implementations

Use Cases

  • Choose ui for projects requiring extensive customization and a wide range of components
  • Opt for Kobalte when prioritizing accessibility and simplicity in component implementation

Both libraries offer valuable features for React developers, with ui excelling in customization and Kobalte in accessibility. The choice depends on project requirements and developer preferences.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

kobalte

license-badge

A UI toolkit for building accessible web apps and design systems with SolidJS.

Packages

NameVersionDescription
@kobalte/corecore-npmUnstyled components and primitives for building accessible web apps and design systems.
@kobalte/tailwindcsstailwindcss-npmA TailwindCSS plugin for styling Kobalte components states data-* attributes by using modifiers like ui-expanded:*
@kobalte/vanilla-extractvanilla-extract-npmA Vanilla Extract plugin for styling Kobalte components states data-* attributes by using an utility function.

Documentation

For full documentation, visit kobalte.dev.

Roadmap

View roadmap, give feedback and vote for new features at https://github.com/orgs/kobaltedev/projects/4.

Contributing

Before contributing please refer to CONTRIBUTING.md.

All contributions are moderated under the Contributor Covenant Code of Conduct.

Acknowledgment

Created by Fabien Marie-Louise.

License

This project is licensed under the MIT License.

NPM DownloadsLast 30 Days