shadcn-solid

Docs

Changelog

Latest updates and announcements.

Sep 2024 - New Components

A collection of links for navigating websites.

Jun 2024 - New components

Number Field

A number input that allow users to input custom number entries with a keyboard.

OTP Field

A fully featured OTP input component. Support all default keybindings and is accessible, Android and iOS copy, paste, cut and many more. Built on top of @corvu/otp-field. An awesome work from Jasmin.

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Calendar

New Calendar demo.

May 2024 - CLI and components update

CLI Updates

`diff`

Track upstream component updates with diff.

Run the diff command to get a list of components that have updates available:

npx shadcn-solid diff

┌   shadcn-solid
│
◇  The following components have updates avaiable
│
●  alert - path\to\my-ap\components\ui\alert.tsx
│
●  card - path\to\my-ap\components\ui\card.tsx
│
└  Run diff <component> to see the changes

Then run diff [component] to see the changes:

npx shadcn-solid diff alert

const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)

`add`

Adding multiple components or using --all is significantly faster

Schema update

The components.json schema has been updated

New schema

{
  "$schema": "https://shadcn-solid.com/schema.json",
  "tailwind": {
    "config": "tailwind.config.cjs",
    "css": {
      "path": "src/app.css",
      "variable": true
    },
    "color": "slate",
    "prefix": ""
  },
  "alias": {
    "component": "@/components",
    "cn": "@/libs/cn"
  }
}

Component updates

We've added new components to shadcn-solid.

Toggle Group - A set of two-state buttons that can be toggled on (pressed) or off (not pressed).
Sonner - An opinionated toast component for Solid.

Toggle Group

Sonner

Transitioned two existing components, Splitter and Command, to utilize the new Resizable from corvu and the solid port of cmdk, respectively.

April 2024 - UnoCSS.

We're excited to announce support for UnoCSS, an instant atomic CSS engine.

Framework selection

You can select your preferred CSS framework during project setup using the init command:

◆  Which CSS framework would you like to use?
│  ○ TailwindCSS
│  ● UnoCSS

Component installation

A new --all option has been added to the add command. This enhancement simplifies installing all available components in one go.

March 2024 - Drawer.

Drawer - A draggable dialog that is attached to any side of the viewport.

Drawer

Built on top of Drawer component from Corvu.

March 2024 - Updated docs, UI, and fixed bugs.

Update style for Date Picker.
Updated documentation for Toggle and Toast.
Fixed focus issue with Checkbox.
Resolved duplication problem occurring with Toast.
Corrected styling for Tabs.

February 2024 - New components, CLI and more

We've added new components to shadcn-solid and made a improvements to the CLI.

Here's a quick overview of what's new:

Carousel - A carousel component with motion, swipe gestures and keyboard support.
Pagination - A pagination component allows the user to select a specific page from a range of pages.
Command - A Composable command menu component.
Date Picker - A component that allows users to select a date from a calendar.
CLI updates - Support for custom Tailwind prefix, remove style and more.

Date Picker

Command

Carousel

We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of Embla Carousel.

It has support for infinite looping, autoplay, vertical orientation, and more.

Pagination

We've added a pagination component with page navigation, previous and next buttons. Simple and flexible.

CLI updates

Icon library

We're removed the icon library and using SVG for more flexibility.
Remove style property

In this update, the style property has been removed, but there's a possibility of its return if additional styling features are introduced in future updates.
Support custom ui dir

You can use this config to customize the installation directory for your ui components.
components.json
```
{
  "aliases": {
    "ui": "@/ui"
  }
}
```
Support custom Tailwind prefix

You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components.

A drop-in for your existing design system with no conflict. 🔥
```
<AlertDialog class="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />
```
It works with cn, cva and CSS variables.

That's it. Happy Lunar New Year.

Figma About